前端在图片上设置点击事件并且自适应。

把一张图片分为好几个区域，点击不同区域触发对应的事件。可以通过HTML中的map标签来实现该功能（图片热区）。具体参考：http://www.w3school.com.cn/html5/tag_area.asp

 HTML代码

<img src="planets.gif" alt="Planets" usemap ="#planetmap" />

<map id="planetmap">
 <area shape ="rect" coords ="0,0,110,260" href ="sun.htm" alt="Sun" />
 <area shape ="circle" coords ="129,161,10" href ="mercur.htm" alt="Mercury" />
 <area shape ="circle" coords ="180,139,14" href ="venus.htm" alt="Venus" />
</map>

 

后来图片使用了自适应后发现有问题了，根据坐标对应的区域不一致。根据以下方法可以解决：

参考：https://www.cnblogs.com/shenggen/p/5483463.html

1、map在浏览器的兼容性相对来说是比较好的，这是我在项目中的一个处理方法

     推荐到下面网站去画map  http://imagemap-generator.dariodomi.de/

2、画完去github上拉一下代码

   https://github.com/stowball/jQuery-rwdImageMaps

   这个库非常好用，支持自适应。注意图片的大小设置与画第一点画map的大小保持一致。

 

图我就不贴出来了，知道怎么做就好，具体代码如下所示：

<img src="/plug-in/core.jpg" width="160" height="392" usemap="#planetmap" style="vertical-align: top; width:160px;height:100%" />
    <!-- 图片点击事件 -->
<map name="planetmap" id="planetmap">
    <!-- 0-200m -->
    <area shape="rect" coords="10,13,113,77" onclick="getCorePhoth('1')" />
    <!-- 200-500m -->
    <area shape="rect" coords="10,77,113,170"  onclick="getCorePhoth('2')" />
    <!-- 500-800m -->
    <area shape="rect" coords="10,170,113,265"  onclick="getCorePhoth('3')" />
    <!-- 800-1000m -->
    <area shape="rect" coords="10,265,113,331"  onclick="getCorePhoth('4')" />
    <!-- 1000m以下 -->
    <area shape="rect" coords="10,331,113,388"  onclick="getCorePhoth('5')" />
</map>
<script type="text/javascript" src="plug-in/jquery/jquery.rwdImageMaps.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
    $('img[usemap]').rwdImageMaps();
});
function getCorePhoth(type){
	alert(type);
}
</script>

 

2019年11月29日17:50:03修改：上面画map的网站进不去了，我就随便找了个更好的

https://www.image-map.net/

用法也很简单，我随便弄个图

然后需要map代码就是Show Me The Code