Responsive Image Map

Responsive image map

For responsive image maps you will need to use a plugin:

https://github.com/stowball/jQuery-rwdImageMaps (No longer maintained)

https://github.com/davidjbradshaw/imagemap-resizer

No major browsers understand percentage coordinates correctly, and all
interpret percentage coordinates as pixel coordinates.

http://www.howtocreate.co.uk/tutorials/html/imagemaps

And also this page for testing whether browsers implement

http://home.comcast.net/~urbanjost/IMG/resizeimg3.html

How to create a responsive image map with pure HTML/CSS?

And idea is to use tags that you place above the image using absolute position. Then you simply specify % values with top/left.

body {
  font-family: "bookman old style";
  margin: 0;
}

img {
  border: 3px dashed indianred;
  display: block;
}

figure {
  position: relative;
  display: inline-block;
}

figure a {
  position: absolute;
  width: 2%;
  height: 4%;
  border-radius: 50%;
  background: #000;
}

.north_america {
  top: 22%;
  left: 11.4%;
}

.south_america {
  top: 59.3%;
  left: 21.8%;
}

<figure style="text-align:center;">
  <a href="#north_america" class="north_america"></a>
  <a href="#south_america" class="south_america"></a>
  <img usemap="#continents_map" src="https://rpsthecoder.github.io/img-repo/world_continents.png" width="300" />
  <figcaption>World Map</figcaption>
</figure>

<figure style="text-align:center;">
  <a href="#north_america" class="north_america"></a>
  <a href="#south_america" class="south_america"></a>
  <img usemap="#continents_map" src="https://rpsthecoder.github.io/img-repo/world_continents.png" width="600" />
  <figcaption>World Map</figcaption>
</figure>
<figure style="text-align:center;">
  <a href="#north_america" class="north_america"></a>
  <a href="#south_america" class="south_america"></a>
  <img usemap="#continents_map" src="https://rpsthecoder.github.io/img-repo/world_continents.png" width="1000" />
  <figcaption>World Map</figcaption>
</figure>

Dynamically resizing Image-maps and images

If you end up to do the task with JavaScript, here is a cross-browser codesnippet to resize all areas in MAP element.

window.onload = function () {
    var ImageMap = function (map) {
            var n,
                areas = map.getElementsByTagName('area'),
                len = areas.length,
                coords = [],
                previousWidth = 1920;
            for (n = 0; n < len; n++) {
                coords[n] = areas[n].coords.split(',');
            }
            this.resize = function () {
                var n, m, clen,
                    x = document.body.clientWidth / previousWidth;
                for (n = 0; n < len; n++) {
                    clen = coords[n].length;
                    for (m = 0; m < clen; m++) {
                        coords[n][m] *= x;
                    }
                    areas[n].coords = coords[n].join(',');
                }
                previousWidth = document.body.clientWidth;
                return true;
            };
            window.onresize = this.resize;
        },
        imageMap = new ImageMap(document.getElementById('map_ID'));
    imageMap.resize();
}

previousWidth must be equal to the width of the original image. You also need to use some relative units in HTML:

<div style="width:100%;">
<img id="Image-Maps_5201211070133251" src="Site.png" usemap="#Image-Maps_5201211070133251" border="0" width="100%" alt="Sample Image" />

Working demo at jsFiddle. If you open the fiddle in IE, you can actually see AREAs when clicking them.

how to make an image map responsive?

This can be accomplished with a simple, old-school responsive image and floating anchors sized and positioned in percentages. Try loading the below snippet at a few different screen widths. You'll see the floating anchor with a red border hovering over Jupiter at all screen widths-- the picture grows and shrinks with the viewport, and the link adjusts its dimensions accordingly.

#wrapper {  width: 100%;  max-width: 812px; /*actual width of image-- behaves strangely if exceeding this*/  position: relative;}
#wrapper img {  max-width: 100%;}
#anchor-jupiter {  border: 1px solid red;  height: 44%;  width: 17%;  position: absolute;  left: 39.75%;  top: 50%;}

<div id="wrapper">  <img src="https://i.stack.imgur.com/myS74.png" />  <a id="anchor-jupiter" href="https://en.wikipedia.org/wiki/Jupiter" target="_blank"></a></div>

Responsive Image Map