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.
Hover Image Map
Hover Image Map
Self taught Flare Newbie!
-
- Propellus Maximus
- Posts: 613
- Joined: Wed Feb 01, 2006 6:21 am
- Location: Off in the dark....
Re: Hover Image Map
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>
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>
Trent.
Certifiable.
umm...
I meant MAD Certified.
Official Propeller Beanie Owner
Are you on Flare's Slack channels? PM me for an invitation!
Certifiable.
umm...
I meant MAD Certified.
Official Propeller Beanie Owner
Are you on Flare's Slack channels? PM me for an invitation!
Re: Hover Image Map
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.
Self taught Flare Newbie!
-
- Propellus Maximus
- Posts: 613
- Joined: Wed Feb 01, 2006 6:21 am
- Location: Off in the dark....
Re: Hover Image Map
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
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
Trent.
Certifiable.
umm...
I meant MAD Certified.
Official Propeller Beanie Owner
Are you on Flare's Slack channels? PM me for an invitation!
Certifiable.
umm...
I meant MAD Certified.
Official Propeller Beanie Owner
Are you on Flare's Slack channels? PM me for an invitation!
Re: Hover Image Map
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
Self taught Flare Newbie!
-
- Propellus Maximus
- Posts: 613
- Joined: Wed Feb 01, 2006 6:21 am
- Location: Off in the dark....
Re: Hover Image Map
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.
Trent.
Certifiable.
umm...
I meant MAD Certified.
Official Propeller Beanie Owner
Are you on Flare's Slack channels? PM me for an invitation!
Certifiable.
umm...
I meant MAD Certified.
Official Propeller Beanie Owner
Are you on Flare's Slack channels? PM me for an invitation!