Copy link to clipboard
Copied
I would like to include an image map in my responsive layout. When I insert just an image into a topic, it resizes correctly as part of the responsive layout. When I add a map to the image, it no longer resizes.
I have seen examples of image map code that does work properly (e.g. jquery, and the coffee image map tool generate working responsive image maps), but when I attempt to incorporate this code into a RH topic, it does not work.
Has anyone gotten a responsive image map to work in RH?
Thanks
John
Message was edited by: John Haller Correction... the tool I tried and was able to produce responsive image maps is called CoffeeCup. I have a sample output which I can provide for investigation. Appreciate any help that can be provided on this. John
Copy link to clipboard
Copied
Hi John
I have been successful with this, but funny enough every project image with mapping is responsive except one. I can't figure out how this image and its maps are any different from the rest...
Kelly
Copy link to clipboard
Copied
Kelly, perhaps it would help if you could post back with the HTML code of a topic where the maps scale and one where the maps don't. My thought is that by comparing the two topics, we could determine what the magick sauce is.
Cheers... Rick
Copy link to clipboard
Copied
Turns out I was wrong - none of my images with image maps are responsive
Copy link to clipboard
Copied
Perhaps the link below will offer some clues?
html - Responsive image map - Stack Overflow
Cheers... Rick
Copy link to clipboard
Copied
Has there been a solution to responsive images when using image maps?
I’m not familiar with jQuery etc.. and would appreciate a simple how to.
Copy link to clipboard
Copied
You can create multiple image maps and filter them out using Conditional Build Tags.
Otherwise the only solution is to work with scripts. I'm afraid the link from Rick is the simple how-to.
Copy link to clipboard
Copied
What do you mean by 'filter them out'?
My image maps are already conditional and I still have this problem.
Copy link to clipboard
Copied
Hi there
I'm pretty sure what Willam was meaning was that you might have multiple copies of the image at different sizes that would accommodate different devices. Then use the conditional tagging to configure a means to use the new "filtering" capability added to RoboHelp 2015 Release so that those that don't apply would not be presented to the end user.
I'll leave it to Willam to explain exactly how you might approach it with the image maps. I know that URLs can be constructed so that a filter is already applied once the desired topic is displayed. But I'm not certain that's the approach he was thinking of.
Cheers... Rick