img使用usemap时快速获取锚点坐标

img使用usemap时快速获取锚点坐标

Img使用usemap

<map name="mapName">
      <area shape="rect" coords="65,60,251,117" href="sun.htm" alt="">
      <area shape="rect" coords="300,60,487,117" href="sun.htm" alt="">
      <area shape="rect" coords="100,135,205,155" href="sun.htm" alt="">
      <area shape="rect" coords="350,130,430,155" href="sun.htm" alt="">
</map>
<img src="imageUrl" alt="" usemap="#mapName">

锚点获取

打开开发者工具，确保jQuery可以使用，输入如下代码

$(document).mousemove(function(e){
  deal(e);
});
deal = (e)=>console.log(e.offsetX + ":" + e.offsetY);

鼠标在图片上移动，控制台会打印出相对于图片左上角的位置左边

76:67
76:66
75:65
73:65
72:65
70:64
69:64
68:64
64:61