How to make responsive imagemap WITH highlight on mouseover?

Question

I need to make responsive imagemap with highlight when the mouse is over the specific part of the image. Can it be done (and how) using ONLY JavaScript, html and CSS ? I found some threads here but only for the part with the responsive imagemap and they used some jQuery plugins. Please, help :)

I used image-map.net but that didnt resolve the problem.

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  overflow: hidden;
  min-height: 100%;
  min-width: 100%;
}

section img {
  position: fixed;
  flex-shrink: 0;
  width: 100vw;
  height: 100vh;
}

<section>
  <div>
    <img id="Image-Maps-Com-image-maps-2023-03-03-153207" src="https://www.linkpicture.com/q/A1C-PBOBiFL._AC_SL1500.jpg" width="1396" height="940" orgWidth="1396" orgHeight="940" usemap="#image-maps-2023-03-03-153207" alt="" />
    <map name="image-maps-2023-03-03-153207" id="ImageMapsCom-image-maps-2023-03-03-153207">
            <area shape="rect" coords="1394,938,1396,940" alt="Image Map" style="outline:none;" title="Image Map" href="brazil.html" />
            <area  alt="" title="" href="brazil.html" shape="poly" coords="477,473,499,484,509,501,539,513,561,522,551,552,538,590,512,597,478,593,452,600,437,596,428,581,418,571,394,545,384,521,389,501,397,477,401,462,412,449,443,455" style="outline:none;" target="_self"
            onmouseover="function highlight(){
            'some code here for highlighting'}"    />
            </map>
</section>

Please give us code so we have something to work on. You can for example position your specific area relative to the image using %. That way it will be responsive. — A Haworth, Mar 03 '23 at 15:02
Hi, I added the code and inserted function onmouseover where the highlight should happen. It appears that when i set height and width on the image the area is not responsive and not correct. — Christian, Mar 03 '23 at 16:13

jme11 · Accepted Answer · 2023-03-03T19:51:27.833

Your best bet would probably be an SVG. You can make it accessible, responsive and you can style it easily with CSS.

How to create a responsive and accessible SVG map:

Set the SVG viewBox to the natural width and height of your image (e.g. your map had a width of 1396 and a height of 940, so I set the viewBox to viewBox="0 0 1396 940").
Set the SVG height and width to 100% so that it fills whatever container you put it in and retain its aspect ratio.
Make sure to set the image tag height and width properties both to 100% so that the image in the SVG fills the SVG viewBox.
Add a <polygon /> after the image so it is on top of the map image when rendered.
Set the points property to the same values as your area poly in your image map.
Set the fill property of the poly to transparent so that it is hoverable.
Use an onclick property or event listener in your JavaScript to create the click handler.
Use CSS to style it as you want.
To make the polygon accessible add a <title> and wrap both it and the polygon in its own group (<g>), such as:

<g>
  <title id="title" lang="en">Click to visit a page about Brazil</title>
  <polygon ... />
</g>

Working example:

function gotolink(link) {
  // use window.location or similar to go to the link
  console.log(link);
}

main {
  max-width: 60rem;
  margin: auto;
}

polygon:hover {
  stroke: hsl(320 80% 50%);
  stroke-width: 2px;
  fill: hsl(320 80% 50% /0.5);
}

<main>
  <h1>Hover over/click on Brazil</h1>
  <svg viewBox="0 0 1396 940" width="100%" height="100%">
    <image x="0" y="0" width="100%" height="100%" xlink:href="https://www.linkpicture.com/q/A1C-PBOBiFL._AC_SL1500.jpg" />
    <polygon onclick="gotolink('brazil.html')" points="477,473,499,484,509,501,539,513,561,522,551,552,538,590,512,597,478,593,452,600,437,596,428,581,418,571,394,545,384,521,389,501,397,477,401,462,412,449,443,455" fill="transparent" stroke-miterlimit="10" />
  </svg>
</main>

How to make responsive imagemap WITH highlight on mouseover?

1 Answers1

How to create a responsive and accessible SVG map:

Working example: