Highlighted

Why are image maps not responsive?

Explorer ,
Oct 27, 2015

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

Topics

HTML5 layout

Views

973

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Why are image maps not responsive?

Explorer ,
Oct 27, 2015

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

Topics

HTML5 layout

Views

974

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
New Here ,
Nov 30, 2015

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
LEGEND ,
Nov 30, 2015

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
New Here ,
Jun 07, 2016

Copy link to clipboard

Copied

Turns out I was wrong - none of my images with image maps are responsive

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
LEGEND ,
Jun 07, 2016

Copy link to clipboard

Copied

Perhaps the link below will offer some clues?

html - Responsive image map - Stack Overflow

Cheers... Rick

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
New Here ,
Jun 28, 2016

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
LEGEND ,
Jun 29, 2016

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
New Here ,
Jul 12, 2016

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Captiv8r LATEST
LEGEND ,
Jul 12, 2016

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...