MadCap Software Forums

Hi. Does anyone know how to make an Image Map hotspot respond when you point the cursor at it, to convey that it's a button? Not sure if this is possible. I'm using HTML5. Thanks

I tried ages ago and as far as i can tell the area element doesn't support styling at all. There are some fancy css workarounds using border styling and absolute positioning on additional div elements plus onmouseover and onmouseout javascript to show and hide the div, or using an existing javascript library. Probably a javascript library would be an easier implementation.

In the dark ages, we just used to put a border in the image where each clickable area should be. No interactivity, but at least the hotspots were marked (plus an intro sentence to the image, explaining to click on each marked area).

But image map hotspots do already respond when you mouseover them - in most/all browsers, the mouse icon changes from the default arrow (cursor: default) to a hand (cursor: pointer), the same way it does for a regular hyperlink.

If that icon isn't changing, then use the browser tools (F12) to investigate why.
You can change what icon is displayed on mouseover, but I'd guess you'd already know if you'd customised that in your CSS; e.g. I know you can't see where the edges of the hotspots are, so if that's what you want then you may need to manually draw a box around them as Psider suggests - as I don't think you can do that automatically with CSS.

Thanks for your replies. Think I will live with the hotspots as they are as it is fairly clear they can be clicked on when you point the cursor at them, as the cursor changes style. It would have been nice for them to act more like proper buttons, as this would be more consistent with the existing styles in the project.