Making Image Map hotspots respond to a mouseover.

This forum is for all Flare issues not related to any of the other categories.
Post Reply
Dennetti
Propeller Head
Posts: 50
Joined: Fri Sep 21, 2018 1:42 am

Making Image Map hotspots respond to a mouseover.

Post by Dennetti »

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
Psider
Propellus Maximus
Posts: 811
Joined: Wed Jul 06, 2011 1:32 am

Re: Making Image Map hotspots respond to a mouseover.

Post by Psider »

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). :)
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Making Image Map hotspots respond to a mouseover.

Post by NorthEast »

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.

Code: Select all

area
{
   cursor: help;
}
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.
Dennetti
Propeller Head
Posts: 50
Joined: Fri Sep 21, 2018 1:42 am

Re: Making Image Map hotspots respond to a mouseover.

Post by Dennetti »

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.
Post Reply