这是我参与8月更文挑战的第6天，活动详情查看：8月更文挑战
我之前不知道图像热区链接是什么东东，听都没听过￣□￣｜｜，直到今天有人问我的时候我百度了一下才知道这个东西，感觉挺有意思的，就在此记录一下。
定义：
可以将一张图片划分成若干区域，这个区域就叫“热区”，每个区域可以设置不同的超链接。
要想实现上述效果需要用到 img map area 这三个标签。
img
<img src="" border="0" usemap="将图像定义为客户器端图像映射" alt="Planets" />
map
// 这里的name一定要与img标签的usemap保持一致
<map name="planetmap"></map>
area
area标签是关键，它有好几个属性，这里为了方便我就直接把w3c的截图放上了
其中需要注意的是coords属性：
shape="circle"：
coords包含三个参数，分别为center-x、center-y、radius，分别代表圆心的横坐标、纵坐标、半径。
shape = "rect"：
coords包含四个参数，分别为left、top、right、bottom，分表代表矩形的四个坐标点。
shape = "poly"：
coords按顺序取多边形各个顶点的（x、y）坐标值，格式为"x1, y1, x2, y2, …… xn, yn"， 数量必须是偶数。可以是逆时针，也可以是顺时针。HTML会按照定义顶点的顺序将它们链接起来，形成多边形热区。
下面是一个w3school的例子：
<img src="https://www.w3school.com.cn/i/eg_planets.jpg" border="0" usemap="#planetmap" alt="Planets" />
<map name="planetmap">
<area shape="circle" coords="160,100,12" href ="https://www.w3school.com.cn/example/html/venus.html" target ="_blank" alt="Venus" />
<area shape="circle" coords="110,130,10" href ="https://www.w3school.com.cn/example/html/mercur.html" target ="_blank" alt="Mercury" />
<area shape="rect" coords="0,0,100,260" href ="https://www.w3school.com.cn/example/html/sun.html" target ="_blank" alt="Sun" />
</map>
点击图像上的三个星球可以新页面打开对应星球放大的图片，也就是href里的地址。
