图片中的热点区域

图片上添加热点这个功能貌似很少用了，今天偶然想起了大学的课程，竟然忘记怎么用了，后来度娘一下，重新拾起！其实很简单，上教程
这里只需要三个 html 标签 分别是 img  map  area 

使用的注意事项

要想建立图片热点区域，必须先插入图片。并且图片必须增加usemap属性，说明该图像是热点区映射图像，而且必须以#开头。
<map>标记只有一个属性id，其作用是为区域命名，属性值必须与<img>标记的usemap的属性值相同。
<area>标记主要定义热点区域的形状与超链接，它有三个相同的属性:
1.shape属性，控制划分区域的形状，其值有3个，分别为rect（矩形）、circle（圆形）、poly（多边形）。
2.coords属性，控制区域划分的坐标。
如果shape属性取值为rect，那么coords的设置分别为矩形的左上角x，y坐标点和右下角x，y坐标点，单位为像素。
如果shape属性取值为circle，那么coords的设置分别为圆形圆心的x，y坐标点和半径点值，单位为像素。
如果shape属性取值为poly，那么coords的设置分别为多边形的各个点x，y坐标点，单位为像素。

<img src="./image/phone.png" usemap="#phone" alt="">
 <map name="phone">
　　// 数据查询的热点 定义的是一个矩形区域
  <area shape="rect" coords="344,86,437,111" href="http://www.baidu.com" alt="">
　　// 首页的热点是一个 圆形的区域
  <area shape="circle" coords="70,100,10" href="http://www.baidu.com" alt="">
</map>

图片中的热点区域

 有小伙伴可能会好奇怎么找热点区域的坐标，我是借助ps（ps确定区域坐标的教程） 来确定坐标的，当然还会有其他方式