Do Image Maps work?

[lizat]

Dear mapcaps,

i am trying to implement image maps. i know there used to be some problems but I thought that was ages ago. I have found two problems:

1. I have several times defined image maps for an image but not all hyperlinks were available when I generated the output
2. I had one image with one hotspot, that was ok. Then immediately below i had a second image, when I opened the map it showed the map for the image above it. I changed it thinking it was a bit like the stylesheet editor that 'hangs on to' the last values entered, however when I then returened to image 1map I found it looked like image 2's. I check the code and they both point to map1 and there is only map1 defined.

This characteristic is crucial to me as a large part of my output is a process model which 'explodes' to new levels for each process - basically a box on a diagram.

Thank you................... liz

[ChoccieMuffin]

In brief, yes, they work. I have had topics that contained several images with different maps, both maps being defined at the top of the topic.

[pdambrosio]

Yes they work. I just completed an architecture image where several component shapes call to specific topics.
However, these work only in the WebHelp version, so for PDFs I copied the same image and used conditions to ensure that only the correct image appears in the output.
What I did not like was the text that appeared in the PDF image when areas were highlighted--not what was defined. For this reason I saved the image w/o the mapping for the PDF.

[lizat]

thank you for the replies.

If they don't work in HTML5 and i change to producing Webhelp what likely impact wuold this have - aside from the maps working?

Thank you....................... liz

[NorthEast]

I don't think you'll find any difference in image maps between HTML5 and WebHelp. (And they work fine for me in HTML5.)

I think image maps work, but the image map editor itself is a bit clunky.

Just remember not to use any CSS that resizes the images (width, max-width, etc.), as the maps are fixed and don't resize.

[lizat]

hi dave,

You may have identified my problem as I am applying a style with a max width on it. rats!

Thank you...................... liz

[lizat]

Ok, so now fixed my problem by laboriously resizing outside of Flare.

The question is will this be 'fixed' in Falre, i.e. is there an intention to allow resizing images to work with image maps in HTML5?

liz

[NorthEast]

That's a question only MadCap can answer - but I'd suggest putting in a feature request if you want to see it happen.

[drmcp15]

Hi Liz,

I'm trying to get image maps to work with images that are resized/resizable (i.e., using max-width). You say you were able to fix your problem "by laboriously resizing outside of Flare." Could you please share what you did?

Thanks,

David

[robdocsmith]

Hi guys,

You CAN get basic rectangular image-map like links to work in a responsive environment. I was struggling as I really wanted an image map as a visual navigator for my systems, but had to cater for web/tablet and phone formats. I followed a number of options, none of which seemed to work for my situation:

• * basic image maps and a fixed image - I really wanted to be able to scale the image and map together
  * links embedded in an SVG of the image - although SVG hotlinks do work in browsers, they don't in the Flare HTML5 output.
  * splitting the image into fragments and hotlinking each - painful to manage going forwards

In the end I found you could overlay basic hotlinks using a higher z-index than the page. It takes a little maths, though there is a nifty calculator for just this situation at https://www.zaneray.com/responsive-image-map/.

My image map link looked like:

Code: Select all

<map id="map1">
   <area shape="circle" coords="797,354,50" href="sunroof.htm" />
</map>

Instead place your image in a relative positioned div along with hotlinks:

Code: Select all

<div style="position: relative;">
   <img src="my_image.png" />
   <a href="sunroof.htm" title="" style="position: absolute; left: 48.2%; top: 27.8%; width: 6.5%; height: 9.1%; z-index: 2;"></a>
</div>

The z-index positions the link on top of the image. This results in an image that scales with the window and a link that moves relative to the image.

To get the % values, I used the image map coordinates. My image was 1550 x 1094px. Because I'd used circular hotspots with a centre point I had to reconfigure those for a rectangle. the radius of my circle was 50, so the left position was (797-50)/1550% and the top (354-50)/1094%, the width being 100/1550% and height 100/1094%.

If you don't mind rectangular hotspots, this will do the trick for you.

Cheers,
Rob Partridge