图像热点链接

指定图片某块区域加超链接 ：使用map标签可以给指定图片某块区域加超链接
使用方法：
例：
 <img src="../imgs/1.jpg" alt="" usemap="#map1" />
    <map name="map1" id="map1">
      <area
        shape="rect"
        coords="500px,481px,670px,662px"
        href="./test.html"
        alt=""
      />
      <area shape="circ" coords="774px,582px,86px" href="./test.html" alt="" />
    </map>

1)在html文件中插入一个图片
  <img src=”../img/1.jpg” usemap="">
  属性：
   usemap:将图像定义为客户端图像映射
  
2)在html文档中插入一个map标签
  A. map标签：定义客户端的图像映射，图像映射是带有可点击区域的图像
  B. 为map标签设置id属性and name属性，属性值相同
  
3)为img标签加上usemap属性，属性值为map标签的id/name 
    语法：<img src="1.jpg" usemap="#id/name">
说明：
    img中的usemap属性可引用map中的id或name属性（由浏览器决定）所以需要添加id和name两个属性

4)在map标签内嵌套一个或者多个area标签来实现给指定区域加超链接
   area标签：定义图像映射内部区域area标签始终嵌套在map标签内部
   语法：
   <area shape="" coords="" target="" href="" alt="">
   属性：
     shape:定义区域形状
       属性值：rect-正方形
              circ-圆形
              poly-多边形
     coords：定义可点击区域的坐标(xpx,ypx,npx)
     alt：定义此区域的替换文本
     target：设置超链接的打开方式
     
矩形：shape="rectangle、rect"，coords="x1,y1,x2,y2"
     第一个坐标是矩形的一个角的顶点坐标，另一对坐标是对角的顶点坐标，"0,0" 是图像左上角的坐标。

圆形：shape="circle"，coords="x,y,z"
     x 和 y 定义了圆心的位置（"0,0" 是图像左上角的坐标），z 是以像素为单位的圆形半径。

多边形：shape="poly"，coords="x1,y1,x2,y2,x3,y3,..."
     每一对 "x,y" 坐标都定义了多边形的一个顶点（"0,0" 是图像左上角的坐标）。定义三角形至少需要三组坐标；高纬多边形则需要更多数量的顶点。
     多边形会自动封闭，因此在列表的结尾不需要重复第一个坐标来闭合整个区域。

说明：
(1)如果某个 area 标签中的坐标和其他区域发生了重叠，会优先采用最先出现的 area 标签;
(2)浏览器会忽略超过图像边界范围之外的坐标。