HTML图像热区链接

🎨图像热区链接

说明：对一张图片设置自定义形状区域链接到不同地址。
使用到的标签：<img />、<map></map>、<area />

使用方法：

先对目标图像标签设置usemap属性，属性值为井号#加自定义map名称：
1
<img src="..." usemap="#map01"/>
给HTML文档中添加<map></map>标签，标签添加name属性，属性值为上面自定义的map名称，此处不加井号：
1
2
<img src="..." usemap="#map01"/>
<map name="map01"></map>
注：该标签在源码中的位置任意，只要在<html></html>标签内部一般都能生效，但为了代码可读，建议与目标图片放在一起！
<map></map>标签内添加多个自定义的形状标签<area>，该标签有以下属性：
- shape属性：
  
  定义链接热区的形状，有以下值可选：
  - circle：设定区域为圆形；
  - tect：设定区域为矩形；
  - poly：设定区域为多边形；
  - default：设定区域为整张图片。
- coords属性：
  
  用于定义热区的位置和大小，结合shape属性匹配设定：
  - 对于圆形区域来说，该属性包含三个参数，分别为圆心的x、y坐标、圆的半径，如：
    1
    2
    3
    <map name="map01">
    <area shape="circle" coords="50,50,10"/>
    </map>
  - 对于矩形区域来说，该属性包含四个参数，分别为x1、y1、x2、y2，代表矩形左上和右下顶点的坐标，如：
    1
    2
    3
    <map name="map01">
    <area shape="rect" coords="10,10,50,50"/>
    </map>
  - 对于多边形区域来说，该属性可包含多个参数，分别为各顶点的x、y坐标，如：
    1
    2
    3
    <map name="map01">
    <area shape="poly" coords="0,0,10,0,30,30,20,40,0,10"/>
    </map>
  - 若shape值为default，那么coords属性不会生效。

最后，给各个area标签添加必要的href、target等属性即可，如：

<img src="" totle="" alt="" usemap="#map01"/>
<map name="map01">
	<area shape="rect" coords="10,10,50,50" href="" title="" target=""/>
    <area shape="circle" coords="50,50,10" href="" title="" target=""/>
    <area shape="poly" coords="0,0,10,0,30,30,20,40,0,10" href="" title="" target=""/>
</map>

补充说明：

同时设置了defaul和形状的话，形状以外才是defaul的生效区域！
以此可以实现依次点击图片中的物体进行人机验证、图片找茬等功能。