把一张图片分为好几个区域,点击不同区域触发对应的事件。可以通过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>