Как сделать мою карту изображений адаптивной, используя JavaScript - PullRequest
Новая
       22

Как сделать мою карту изображений адаптивной, используя JavaScript

0 голосов
/ 26 июня 2019

Я новичок в веб-разработке и пытаюсь адаптировать карту изображений.Это карта, которую я сделал на иллюстраторе и создал изображение SVG с координатами.Я пробовал несколько разных вариантов jquery, но ни одна из них, кажется, не делает карту адаптивной, поэтому я могу нажимать на различные разделы в любом размере.

Любой совет будет принята с благодарностью!

<div style="width:100%">
  <img id="img_ID" src="bar-crawl-map.svg" usemap="#image-map" border="0" width="100%" alt="Map of popular bar areas in Manchester">
</div>

Map
<map id="map_ID" name="image-map">
  <area name="dansgate" shape="poly" coords="449.8,211.27 449.8,180.18 500.46,203.21 490.5,259.91 468.22,320.65 442.89,401.24 
  415.26,488.75 384.17,577.4 326.6,550.92 346.18,496.81 369.2,431.18 401.44,344.83 434.83,255.02            "href="https://en.wikipedia.org/wiki/deansgate" alt="Deansgate">

  <area name="castlefield" shape="poly" coords="92.88,544.01 106.69,504.87 141.23,459.96 242.55,492.2 303.58,519.83 319.69,533.65 
  315.09,577.4 309.33,628.06 206.28,672.97 143.54,624.61            " href="https://en.wikipedia.org/wiki/castlefield" alt="Castlefield">

  <area name="spinningfields" shape="poly" coords="205.71,370.16 373.81,418.84 419.05,297.45 449.8,211.27 406.05,195.15 270.19,276.9"            href="https://en.wikipedia.org/wiki/Spinningfields" alt="Spinningfields">

  <area name="nq" shape="poly" coords="593.62,95.26 518.78,147.07 508.42,205.79 489.5,259.91 509.57,287.54 527.99,273.72 
  616.65,319.78 647.73,362.38 654.64,362.38 691.48,350.87 746.75,338.2 781.29,318.63 797.41,303.66"             href="https://en.wikipedia.org/wiki/northern-quarter" alt="Northern Quarter">
</map>

window.onload = function() {
  var ImageMap = function(map, img) {
      var n,
        areas = map.getElementsByTagName('area'),
        len = areas.length,
        coords = [],
        previousWidth = 128;
      for (n = 0; n < len; n++) {
        coords[n] = areas[n].coords.split(',');
      }
      this.resize = function() {
        var n, m, clen,
          x = img.offsetWidth / 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 = img.offsetWidth;
        return true;
      };
      window.onresize = this.resize;
    },
    imageMap = new ImageMap(document.getElementById('map_ID'), document.getElementById('img_ID'));
  imageMap.resize();
  return;
}
...