H5 图片热点区域应用场景不规则按钮的响应一张图片设置多个响应域使用方法shape属性shape=rect：矩形shap

应用场景

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

使用方法

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


<!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属性

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

coords属性

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