Hover Image Map

[Melodie]

Hi all,
Is there any way to highlight an area in an image map on hover? I would like the area of the image to either outline or shadow when the user scrolls over it as a prompt to click in that area.
Thank you in advance.

[trent the thief]

Hi Melodie,

You can do that in Flare using CSS overlays to highlight the hotspots, but it's non-trivial.

The image map needs to be inside a div to allow for absolute positioning and you'll need to create a piece of css for each hotspot in the map.

The div class holds the imagemap. You can name it anything you want, of course.

.image-map-container {
position: relative;
display: inline-block;
}

Setup the CSS hotspot overlays using this template. The top, left, bottom, right, height, width are the settings from your imagemap's hot spots. You'll need one of these for each hotspot and you'll need to increment the hotspot-X. The name "hotspot" is arbitrary and this statement is where it's defined:

.image-map-container .hotspot-1::before {
content: "";
position: absolute;
top: 10%; /* adjust as needed */
left: 10%; /* adjust as needed */
width: 50px; /* adjust as needed */
height: 50px;/* adjust as needed */
background-color: rgba(255,255,0,0.3); /* semi-transparent yellow */
opacity: 0; /* starts out being invisible */
transition: opacity 0.3s; /* smooth transition */
}

This is the bit that flips the switch on the highlighting (note the hotspot-X name):

.image-map-container .hotspot-1:hover::before {
opacity: 1; /* visible on hover */
}

Here's an example of dropping the div and imagemap into your topic.

<div class="image-map-container">
<img src="your-image-source.jpg" alt="Description" />
<div class="hotspot-1" aria-label="Hotspot 1 description"></div>
<!-- Add more hotspots as needed -->
</div>

[Melodie]

Thank you so much for this, I think I get it. (as always, the proof is in the testing) however it's been a minute since I swam so deep so I shall see how I go.

[trent the thief]

Sure, no worries.

I keep a couple test projects to play with features before trying them out in my docset. It works well for me when testing ideas or troubleshooting. My primary project takes >6 minutes to build, so reproducing any issues in a 1 minute-build project is much better for me

[Melodie]

Whelp, still drowning but I did setup a test topic to play with this in. I just have to get the positioning right. thanks again for your help

[trent the thief]

I'm really glad you're making progress. There a re number of online sites that help setup image maps. Give https://www.image-map.net/ a look.