H5 图片热点区域

时间 2019-12-06

标签 h5 图片热点区域繁體版

原文原文链接

应用场景html

不规则按钮的响应
一张图片设置多个响应域

使用方法this

利用usemap属性，构建一个map标签spa

<!DOCTYPE html>
<!--先设置一个usemap属性，而后下面的map利用这个名字加以链接-->
<img src="xxx.png" usemap="#map"
<map name="map">
  <!--设置一个圆形的坐标相对于图片为（20，20），半径为20的圆形区域 ，onFocus="this.blur()" 去掉虚线框-->
  <area shape="circle" coords="20,20,20" title="1111111" href="xxxx" onFocus="this.blur()">
  <!--设置一个左上角坐标为（100，100），右下角坐标为（200，200）用来定位矩形的位置-->
  <area shape="rect" coords="100,100,200,200" title="222222222" href="xxxx">
  <!--设置一个不规则区域-->
  <area shape="poly" coords="0,0,200,0,200,200,100,300,0,200" href="xxxx" title="3333333333">
</map>
复制代码

shape属性code

shape=rect：矩形
shape=circle：圆形
shape=poly：不规则图形

coords属性cdn

矩形：必须使用四个数字，前两个数字为左上角座标，后两个数字为右下角座标
圆形：必须使用三个数字，前两个数字为圆心的座标，最后一个数字为半径长度
任意图形（多边形）：将图形之每一转折点座标依序填入