Image map onmouseover?
Question
I created an image map (old school, I know. It's my best option) and I would like the opacity to change when I hover with the mouse. I don't know how to achieve this with JS, can anyone help me out? My map code is below.
<html>
<img src="img" usemap="#image-map">
<map name="image-map">
<area target="" alt="tools" title="tools" href="https://datascience.nih.gov/tools-and-analytics" coords="91,61,164,160,156,182,41,218,37,204,34,186,35,167,36,149,41,131,49,112,63,89,79,71" shape="poly">
<area target="" alt="comm" title="comm" href="https://datascience.nih.gov/community-engagement" coords="95,60,108,52,124,43,142,38,167,34,189,33,211,38,230,44,247,51,260,60,190,159,165,160" shape="poly">
<area target="" alt="work" title="work" href="https://datascience.nih.gov/workforce-development" coords="263,62,274,72,286,84,297,100,307,117,316,143,319,167,319,186,317,205,313,219,198,183,191,159" shape="poly">
<area target="" alt="eco" title="eco" href="https://datascience.nih.gov/data-ecosystem" coords="312,223,306,237,297,253,288,266,272,284,251,299,234,309,220,314,201,318,180,321,178,198,198,185" shape="poly">
<area target="" alt="infra" title="infra" href="https://datascience.nih.gov/data-infrastructure" coords="175,320,161,319,141,315,126,311,110,304,95,295,83,285,73,275,64,265,57,254,50,242,46,231,42,223,157,184,176,198" shape="poly">
</map>
</html>`
1 answers
solution1
0 2019-12-01 22:50:13
AREA elements define a shape and have no content. The only CSS property that I can confirm they respond to is cursor - specifying properties such as background , opacity or border had no effect that I could produce.
You may be able to change the cursor to an image with alpha channel transparency effects to achieve a change in appearance but it would move with the cursor.
A posible workaround may be to place a content element in front of the image with opacity set to zero (or fully clipped), and turn pointer events off for the element so they pass through to the MAP element. Then in JavaScript process AREA mouseover and mouseout events to reveal parts of the invisible overlay. (Using an SVG overlay with a program controlled clipping region comes to mind, with optional opacity transitions)
AREA element mouse events bubble up to the MAP element, so you can add mouseover and mouseout event listeners to the MAP for event delegation.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.