Search code examples
javascripthtmlcssresponsiveimagemap

How to make responsive imagemap WITH highlight on mouseover?

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>

Solution

  • 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:

    1. 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").
    2. Set the SVG height and width to 100% so that it fills whatever container you put it in and retain its aspect ratio.
    3. 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.
    4. Add a <polygon /> after the image so it is on top of the map image when rendered.
    5. Set the points property to the same values as your area poly in your image map.
    6. Set the fill property of the poly to transparent so that it is hoverable.
    7. Use an onclick property or event listener in your JavaScript to create the click handler.
    8. Use CSS to style it as you want.
    9. 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>