使用map结合jquery.rwdImageMaps.js jquery.maphilight.js实现图片分区点击 且支持自适应及高亮（一般用于地图）

因工作项目需要实现一个地图区域，要求支持响应式并且对应区域鼠标滑过要有高亮效果。

1. 给需要添加效果的图片，添加 usemap="xxx" 属性。

关于map标签如何使用，可参考HTML <map> 标签

<img src="PC_the whole map.png" usemap="#map" id="map-pc" width="2236" height="1691"/>

2. Free Online Image Map Generator 使用这个工具圈出需要操作的区域，或者可以使用Adobe的工具dreamweave(不过这个要收费，如果没下过的用户可以试用几天，我使用的就是这个)。

选择图片，可以选择要操作图片区域的形状，可以是矩形，圆形，多边形。这里我们根据图片需要选择，这里选择多边形Poly。可以给每个区域添加Link，实现区域的点击跳转，点击add new area可以添加多个区域，像这样选好区域后，点击show me the code就会出现带有坐标的map区域了。

这里我们只需要它的map区域就好，图片的src地址在我们项目里。

注意map的name要和图片的 usemap对应上。

有了以上内容之后，我们实现了图片区域点击的效果， 但是这里还不支持响应式，拖动窗口大小的时图片会显示不完全。

3. 使用jquery.rwdImageMaps.js库来实现响应式。

jquery.rwdImageMaps.jshttps://github.com/stowball/jQuery-rwdImageMaps/blob/master/jquery.rwdImageMaps.js

将jquery.rwdImageMaps.js放入项目中，引用。

$('img[usemap]').rwdImageMaps();

 使用该库实现响应式时，需要在img标签内添加图片的宽高。

    <img src="PC_the whole map.png" usemap="#map" id="map-pc" width="2236" height="1691"/>

图片的css

img {
    width: auto;
    height: auto;
    max-width: 100%;
  }

 此时，我们再打页面，拖动窗口时，发现图片区域已经可以自适应了。

4. 使用jquery.maphilight.js实现区域高亮。https://github.com/kemayo/maphilighthttps://github.com/kemayo/maphilight

jQuery maphilight documentationhttps://projects.davidlynch.org/maphilight/docs/#maphilight将jquery.maphilight.js引入项目，调用。

$('img[usemap]').maphilight()

 可以在源码中修改高亮的属性，或者是在js中重写属性覆盖。

d.fn.maphilight.defaults = {
      fillColor: "ffffff",  //填充颜色
      fillOpacity: .2,      //填充透明度
      stroke: !1,           //是否需要边框  1--有边框 !1--无边框
      strokeColor: "ff0000",//边框的颜色
      strokeOpacity: 1,     //边框的透明度
      strokeWidth: 1,       //边框的宽度
}

此时打开页面，发现鼠标滑过区域后已经有了高亮的效果。

在.resize中再调用一次该函数，实现区域高亮的响应式效果。

const $mapImage = $('img[usemap]');
$(window)
    .on('load', function () {
      $mapImage.rwdImageMaps();
      $mapImage.maphilight();
    })
    .on('resize', function () {
      $mapImage.maphilight();
    });

到此，区域的响应式高亮点击效果就做好啦。

但是当我们在safair浏览器查看时，会有问题，我们需要打开maphilight源码，修改以下内容以兼容safari浏览器。

另外，如果需要调整图片显示大小。（可以使用以下方法，或者是自行裁减图片，重新选择区域）

css修改图片显示的比例 width= 90%；修改了宽度比例后，高亮区域及点击区域会错位。因为当初我们添加区域的时候使用的是原尺寸添加的，所以修改宽高之后会无法适用。需要修改img标签上的width和height为图片原尺寸*0.9之后的宽高。并在maphilight中添加以下代码。

 但是这样第一次打开页面时，图片的高亮区域会对应不起来。需要添加以下代码，让自适应在页面加载完成前先加载一次。

  $(document).ready(function () {
    $mapImage.rwdImageMaps();
  });

完整的js代码如下：

const $mapImage = $('img[usemap]');
  $(document).ready(function () {
    $mapImage.rwdImageMaps();
  });
  $(window)
    .on('load', function () {
      $mapImage.rwdImageMaps();
      $mapImage.maphilight();
    })
    .on('resize', function () {
      $mapImage.maphilight();
    });