Image maps not resizing

Question

Im creating a spot the difference game.

I have the game working but I have found that it isnt responsive and the images and maps are not resizing.

Click the demo link and resize the page to anything smaller than tablet (768w) and you will see that the images dont resize.

This is because the wrapper div has a width of 600px. If I remove this then the images resize, but the clickable maps dont and the game breaks.

Main HTML is bellow, but you can view source from the demo.

DEMO

HTML:

<div id="wrapper">
<div id="transparentmap">
        <img class="transparentmap img-fluid" src="map.png" usemap="#photohunt" />
        <map name="photohunt">
        <area  id="m1" coords="388,224,30" shape="circle">
        <area  id="m2" coords="532,191,30" shape="circle">
        <area  id="m3" coords="173,246,30" shape="circle">
        <area  id="m4" coords="349,59,30" shape="circle">
        <area  id="m5" coords="127,181,30" shape="circle">
        <area  id="m6" coords="61,262,30" shape="circle">
        </map>
    </div>
    <div id="m1d"></div>
    <div id="m2d"></div>
    <div id="m3d"></div>
    <div id="m4d"></div>
    <div id="m5d"></div>
    <div id="m6d"></div>    
    <img id="different" class="img-fluid" src="2.jpg">
    <img id="original" class="img-fluid"  src="1.jpg">
</div>

Answer 1

I took a look on your website and it works correctly. but I didn't like the way you use divs and image maps to make the game, and I noticed you have an image for each correct guess! so I thought it would be nice to build you a good example.

I made this example, try it. it's fully dynamic and no more divs, no more maps, and it's in pure JavaScript, now you can add as much as you want, you can build on top of it your own game.

If you have any questions just tell me, happy coding :)

let imgElem = document.querySelector("#m_map"),
  statisticsElem = document.querySelector("#m_statistics span"),
  canvasElem = document.querySelector("canvas"),
  ctx = canvasElem.getContext("2d");

const COORDS = {
  default: [
    [388, 224, 30], [532, 191, 30], [173, 246, 30],
    [349, 59, 30], [127, 181, 30], [61, 262, 30]
  ],
  new: [
    [388, 224, 30], [532, 191, 30], [173, 246, 30],
    [349, 59, 30], [127, 181, 30], [61, 262, 30]
  ],
  clicked: []
};

function drawCircle(x, y, r, c, w) {
  ctx.strokeStyle = c;
  ctx.lineWidth = w;
  ctx.beginPath();
  ctx.arc(x, y, r, 0, 2 * Math.PI);
  ctx.stroke();
}

imgElem.onload = window.onresize = function() { 
  canvasElem.width = imgElem.width;
  canvasElem.height = imgElem.height;
  COORDS.new.forEach(function(c, ind) {
    coords = COORDS.default[ind];
    COORDS.new[ind] = [coords[0] * imgElem.width / 600, coords[1] * imgElem.height / 400,
      coords[2] * imgElem.height / 400];
  });
  COORDS.clicked.forEach(function(index) {
    var coords = COORDS.new[index];
    drawCircle(coords[0], coords[1], coords[2], "red", 3);
  });
};

canvasElem.onclick = function(e) {
  COORDS.new.forEach(function(coords, ind) {
    if(COORDS.clicked.indexOf(ind) === -1 && e.offsetX >= coords[0] - coords[2] && e.offsetX <= coords[0] + coords[2] &&
       e.offsetY >= coords[1] - coords[2] && e.offsetY <= coords[1] + coords[2]) {
      drawCircle(coords[0], coords[1], coords[2], "red", 3);
      var correctGuesses = COORDS.clicked.push(ind);
      statisticsElem.innerHTML = correctGuesses;
      if(correctGuesses === COORDS.default.length) {
        alert("You win!");
      }
    }
  });
}

* {
  box-sizing: border-box;
}
#m_container {
  background-color: lightgreen;
  padding: 10px;
  width: 40%;
  position: relative;
  border-radius: 10px;
  box-shadow: 2px 2px 2px #ccc;
}
#m_container img {
  width: 100%;
}
#m_container canvas {
  position: absolute;
  top: 10px;
  left: 10px;
}

<div id="m_statistics">
  <p>Differences Found:<span>0</span></p>
</div>
<div id="m_container">
  <canvas></canvas>
  <img id="m_map" src="https://stefan.admark.co.uk/test/2.jpg"> 
  <img src="https://stefan.admark.co.uk/test/1.jpg">
</div>

Answer 2

I have done that by my self, to make the coords dynamic, add this code to your script, so everytime the user resizes the window the coords get recalculated.

var img = document.querySelector(".transparentmap"),
  areas = document.querySelectorAll("area");
var originalCoords = [
  [388,224,30],
  [532,191,30],
  [173,246,30],
  [349,59,30],
  [127,181,30],
  [61,262,30]
];
img.onload = window.onresize = function() { 
  areas.forEach(function(area, ind) {
    var coords = originalCoords[ind];
    area.coords = `${coords[0] * img.width / 600}, ${coords[1] * img.height / 400}, ${coords[2] * img.height / 400}`;
  });
}