Upon searching this forum, I found this one thread on the subject, but it steers off to suggest “Master Slider” which is not at all something that achieves multiple links on a single image.
Consider the following non-responsive web page which I built using another web design tool in the past:
You can click on any prefecture in that Japan map (a single image) and it will produce a table that contains dealer information. My intent in Blocs is to rebuild that page largely as it is now, using a single map graphic but adding multiple links over it, each which would trigger a modal that would contain the same kind of table as you see on the existing web page. The problem is, Blocs currently won’t allow us to put multiple links atop a single image.
If it was just that one page in my existing non-responsive sites that had this issue, I would not make it a Wish List feature request. But many of my pages built in Freeway have images where I added multiple links over them. As it stands now, there’s no easy way for me to rebuild those web pages in Blocs that in any way resembles the ease of use of the original. Therefore, it would really would be a major feature to have in Blocs.
Please empower us to add multiple links atop single images in Blocs.
That looks like the HTML map tag that used to be quite common on the web. With Dreamweaver you could “draw” a hot spot on an image and type in a URL for that particular area of the image when clicked.
I designed it in Freeway Pro 7. The map is a single graphic. Over each prefecture, I placed individual graphics with the Freeway Rollover action applied, and I then put a hyperlink on each of those graphics. So you get the mouseover graphic when you mouseover and then if you click it brings up the appropriate table data for that prefecture. This is possible in Freeway because it allows you to place graphics wherever you want on the page, pixel-perfect. But Freeway isn’t well suited to making responsive sites, which is why I switched over to Blocs. I’ve spent the last few months rebuilding one of my sites, and I still have a long way to go. Everything must be rebuild, and checked at various breakpoints. It’s a phenomenally time-consuming process, let me tell you! The biggest time consumer is totally rethinking a web page when Blocs won’t allow me to do something that I could easily do in Freeway. This Japan Map page is but one example.
I think the problem here is the responsive nature of Blocs. The image itself would resize or adapt depending upon the size of the browser window/device, but the interactive elements that make up the hotspots would not reposition accurately over the image. I think the best option for this type of feature is to use an external HTML5 animation app such as Temult Hype. Such an app would allow for the simple creation of a hotspot image map that could then be added to blocs as a responsive HTML element. You wouldn’t even have to use the Blocs modal option - the modal could be built right into the element.
It doesn’t scale down to iPhone sizes though but rather the map jets off to the side when the screen width is too narrow, but perhaps that was a design choice made by the author of that map to keep it from scaling down too small.
Anyway, thank you. I will investigate it further when I have the time.
Yes, the example you mentioned wasn’t designed as a responsive graphic. In Hype you do have the option of making the graphic scalable to suit differing screen sizes. But, the better option that’s built into hype is to make device variants in which you scale down the graphics manually. This gives you more control over what happens at different breakpoints. The reason I prefer this option is really for scaling text so that it doesn’t become too small to read on smaller devices. The attached screenshot shows how this is achieved.
This is a nice option where you may want to adjust the size of individual elements, such as hotspots or text labels, making them easier for users to work with on smaller screens.
I see that @Pealco has already provided you with a link (thanks Pealco). As you will see, embedding the files is very simple with just two lines of code. The only thing you have to be aware of is that you must publish to disk and add the Hype-generated resource folder to the published folder before you can preview. Fortunately, once it’s embedded and you’ve confirmed that it works OK by previewing in a browser, you can make any additional changes to your site as often as you need. If you keep exporting to the same published folder, there will be no need to copy the Hype resources again - they won’t be overwritten by Blocs.
An alternative method would be to publish your Hype project to a folder or even to your web host. This folder will contain the resources folder and an index.html file.
Back in blocs just add an iFrame using the code bric.
Substitute the src to the actual index.html file in your Hype project folder and adjust the height parameter as desired. This method is a good work around where you may experience a conflict in Blocs that prevents the hype file from displaying. (it happens sometimes).
