不规则热区绑定事件

最新推荐文章于 2022-06-07 11:50:21 发布

原创最新推荐文章于 2022-06-07 11:50:21 发布 · 990 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #html

团团的开发日记专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何使用HTML map和area标签配合，解决实际项目中遇到的不规则图形热区问题，通过多边形定义精确的点击区域，兼容IE9以上且避免clipPath的局限。

日常前端开发中，UI小伙伴们脑洞大开突然给你来了一个不规则图形作热区，只能点击图像位置，但是我们HTML的标签都是方形的，不知道你心里会不会暗暗说了一些礼貌的话，可是生活还是得勇往直前，敲了敲脑袋，灯泡冒出来了，最常用的就是map和area组合以及clipPath

一、clipPath

由于项目要兼容IE9及其以上所以果断放弃了clipPath，还有个原因就是clipPath会毁坏原来的图形（IE真是个小可爱！）

具体操作可参考 clip-path相关使用说明

二、map和area标签

map用于定义一个客户端图像映射。图像映射（image-map）指带有可点击区域的一幅图像。area定义map的可点击区域。map和area同时出现。img标签可以指定usermap属性，关联map。

area有几种类型，分别是矩形、圆形和多边形。在我们这个例子中，可以通过多边形定义热区。多边形边界的坐标可以通过绘图软件获取

话不多说，直接上简易demo，重点还是在coords坐标的获取




<div class="box">
    <img src="./demo.png" usermap="#demo-map"/>
    <map name="demo-map">
    <area shape="polygon" coords="54,122,236,75,252,102,262,131,268,162,54,122" href="test()"/>
    </map>
</div>
<script>
    function test() {
        console.log('test')
    }
</script>

注意：多边形最后一个点要和第一个点重合

这种方法基本可以做到目标热区的100%重合，而且同一张图片可以设置多个热区，实现一张图片中不同的位置绑定不同的事件，只是较为复杂的图形需要图形软件配合获取多边形坐标。实现可参考如何用ps找到圆形多边形坐标来确定coords的值相关操作（一般都麻烦UI小伙伴们，麻烦人态度得好）

详情资料可以查看详细文档：map、area