图像地图的工作原理是将图像中的各个区域链接到唯一的目的地。这是为静态图形或照片添加交互性的完美解决方案。图像贴图的缺点是，当您更改浏览器窗口的大小时，像素坐标也需要更新。这就是rwdImageMaps.js插件的用武之地。

rwdImageMaps.js是一个轻量级的jQuery插件，用于在所有设备和浏览器上创建完全响应的图像地图。它会根据原始图像尺寸和当前浏览器窗口的大小自动重新计算和更新图像地图的坐标。

参见：

• 带有jQuery的动态响应图像地图生成器-imageMaps.js
• 用于响应式图像地图的jQuery插件-Image-map.js

如何使用它:

1.将图像地图添加到您的图像中。

<img src="example.jpg" alt="Example" usemap="#workmap">
<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="#">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="#">
  <area shape="circle" coords="337,300,44" alt="Coffee" href="#">
  ...
</map>

2.通过将高度设置为100%，使图像具有响应性。

img[usemap] {
  border: 0;
  height: auto;
  max-width: 100%;
  width: auto;
}

3.在文档中加载rwdImageMaps.js-jQuery插件。

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/cdn/jquery.rwdImageMaps.min.js"></script>

4.初始化图像上的插件。就是这样。

$(document).ready(function(e) {
  $('img[usemap]').rwdImageMaps();
  // do something here
  $('area').on('click', function() {
    alert($(this).attr('alt') + ' clicked');
  });
});

预览截图

jQuery中 全响应图像地图 rwdImageMaps.js