Scalable Image Map JS

Question

I've looked at the other posts and have followed various ones, but can't get this to work.

I have an image which I need to turn into an image map (hotspot) that I will then embed into a WordPress post (irrelevant, but here for context).

I used the following site to generate supposedly 'responsive' code for this image map: https://image-map.weebly.com/

The code generated was as follows:

<img src="http://teaching-and-learning.co.uk/wp-content/uploads/2020/01/LessonBuilder.png" id="map-image" style="width: 75%; max-width: 100%; height: auto;" alt="" usemap="#map" />
<map name="map">
    <area shape="rect" coords="927, 1870, 1440, 2226" href="https://www.teaching-and-learning.co.uk/lesson-end" target="" alt=" alt="End" title="End" />
    <area shape="rect" coords="1460, 1872, 1901, 2227" href="https://www.teaching-and-learning.co.uk/check-understanding" target="_blank" alt="Check Understanding" title="Check Understanding" />
    <area shape="poly" coords="716, 1871, 539, 2227, 911, 2227, 910, 1872" href="https://www.teaching-and-learning.co.uk/questioning-feedback" target="_blank" alt="Questioning & Feedback" title="Questioning & Feedback" />
    <area shape="poly" coords="248, 1397, 419, 1481, 613, 1582, 617, 1846, 639, 1870, 702, 1871, 523, 2224, 392, 2174, 315, 2096, 267, 2015, 248, 1940, 244, 1831" href="https://www.teaching-and-learning.co.uk/differentiate" target="_blank" alt="Differentiate" title="Differentiate" />
    <area shape="poly" coords="582, 1101, 488, 1117, 365, 1180, 290, 1268, 253, 1380, 606, 1554, 1210, 1456, 1211, 1102" href="https://www.teaching-and-learning.co.uk/main-activity" target="_blank" alt="Main Activity" title="Main Activity" />
    <area shape="rect" coords="1228, 697, 1676, 1456" href="https://www.teaching-and-learning.co.uk/effective-instructions" target="_blank" alt="Effective Instructions" title="Effective Instructions" />
    <area shape="rect" coords="1227, 57, 1675, 686" href="https://www.teaching-and-learning.co.uk/progress-indicators" target="_blank" alt="Progress Indicators" title="Progress Indicators" />
    <area shape="rect" coords="463, 57, 1209, 403" href="https://www.teaching-and-learning.co.uk/lesson-template" target="_blank" alt="SMART Lesson Template" title="SMART Lesson Template" />
</map>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="imageMapResizer.js"></script>
<script>$(document).ready(function(e){$("map").imageMapResize();});</script>

I have created the referenced js file in the same directory. If I comment out that imageMapResizer.js file, the image map works as expected when the image is at full size. However, as soon as the js file is enabled, the image map is completely wrong, even when the image is at full size. Changing the width of the image to, for example, 75% doesn't fix the issue either.

Answer 1

The resource you've provided for responsive image maps actually works. I've added the contents of the imageMapResizer.js file and fixed the coordinates of the first area tag, the one for the SMART lesson template. I've tested the responsiveness by changing the width of the main image and it seems to be working just fine.

You have to recalculate and reset the coordinates of the different areas in order to get it working. The coordinate measurement should be done at full scale.

See for yourself and play around with the smart lesson template mapping:

<img src="http://teaching-and-learning.co.uk/wp-content/uploads/2020/01/LessonBuilder.png" id="map-image" style="width: 30%; max-width: 100%; height: auto;" alt="" usemap="#map" />
<map name="map">
    <area shape="rect" coords="927, 1870, 1440, 2226" href="https://www.teaching-and-learning.co.uk/lesson-end" target="" alt=" alt="End" title="End" />
    <area shape="rect" coords="1460, 1872, 1901, 2227" href="https://www.teaching-and-learning.co.uk/check-understanding" target="_blank" alt="Check Understanding" title="Check Understanding" />
    <area shape="poly" coords="716, 1871, 539, 2227, 911, 2227, 910, 1872" href="https://www.teaching-and-learning.co.uk/questioning-feedback" target="_blank" alt="Questioning & Feedback" title="Questioning & Feedback" />
    <area shape="poly" coords="248, 1397, 419, 1481, 613, 1582, 617, 1846, 639, 1870, 702, 1871, 523, 2224, 392, 2174, 315, 2096, 267, 2015, 248, 1940, 244, 1831" href="https://www.teaching-and-learning.co.uk/differentiate" target="_blank" alt="Differentiate" title="Differentiate" />
    <area shape="poly" coords="582, 1101, 488, 1117, 365, 1180, 290, 1268, 253, 1380, 606, 1554, 1210, 1456, 1211, 1102" href="https://www.teaching-and-learning.co.uk/main-activity" target="_blank" alt="Main Activity" title="Main Activity" />
    <area shape="rect" coords="1228, 697, 1676, 1456" href="https://www.teaching-and-learning.co.uk/effective-instructions" target="_blank" alt="Effective Instructions" title="Effective Instructions" />
    <area shape="rect" coords="1803, 57, 1975, 686" href="https://www.teaching-and-learning.co.uk/progress-indicators" target="_blank" alt="Progress Indicators" title="Progress Indicators" />
    <area shape="rect" coords="674, 81, 1760, 583" href="https://www.teaching-and-learning.co.uk/lesson-template" target="_blank" alt="SMART Lesson Template" title="SMART Lesson Template" />
</map>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
  /*! Image Map Resizer (imageMapResizer.min.js ) - v0.5.3 - 2015-01-29
   *  Desc: Resize HTML imageMap to scaled image.
   *  Copyright: (c) 2015 David J. Bradshaw - dave@bradshaw.net
   *  License: MIT
   */

  ! function() {
    "use strict";

    function a() {
      function a() {
        function a(a) {
          function c(a) {
            return a * b[1 === (d = 1 - d) ? "width" : "height"]
          }
          var d = 0;
          return a.split(",").map(Number).map(c).map(Math.floor).join(",")
        }
        for (var b = {
            width: i.width / j.width,
            height: i.height / j.height
          }, c = 0; g > c; c++) f[c].coords = a(h[c])
      }

      function b() {
        j.onload = function() {
          (i.width !== j.width || i.height !== j.height) && a()
        }, j.src = i.src
      }

      function c() {
        function b() {
          clearTimeout(k), k = setTimeout(a, 250)
        }
        window.addEventListener ? window.addEventListener("resize", b, !1) : window.attachEvent && window.attachEvent("onresize", b)
      }

      function d(a) {
        return a.coords.replace(/ *, */g, ",").replace(/ +/g, ",")
      }
      var e = this,
        f = e.getElementsByTagName("area"),
        g = f.length,
        h = Array.prototype.map.call(f, d),
        i = document.querySelector('img[usemap="#' + e.name + '"]'),
        j = new Image,
        k = null;
      b(), c()
    }

    function b() {
      function b(b) {
        if (!b.tagName) throw new TypeError("Object is not a valid DOM element");
        if ("MAP" !== b.tagName.toUpperCase()) throw new TypeError("Expected <MAP> tag, found <" + b.tagName + ">.");
        a.call(b)
      }
      return function(a) {
        switch (typeof a) {
          case "undefined":
          case "string":
            Array.prototype.forEach.call(document.querySelectorAll(a || "map"), b);
            break;
          case "object":
            b(a);
            break;
          default:
            throw new TypeError("Unexpected data type (" + typeof a + ").")
        }
      }
    }
    "function" == typeof define && define.amd ? define([], b) : "object" == typeof exports ? module.exports = b() : window.imageMapResize = b(), "jQuery" in window && (jQuery.fn.imageMapResize = function() {
      return this.filter("map").each(a).end()
    })
  }();
  //# sourceMappingURL=imageMapResizer.map
</script>
<script>
  $(document).ready(function(e) {
    $("map").imageMapResize();
  });
</script>