起因
最近不是流行结婚登报嘛，抱着凑热闹的心态，看看本地的报纸期刊的官网。其中，有一个效果比较有意思，点击报纸中的相关区域跳转到对应的新闻。
每一天的新闻版面都不一样，如果是不断修改代码实现就非常简单，但是每天一改并不现实，肯定有相关的模板的。好好好，既然不会，那我就
F12看看文档结构。
可以发现，效果原理非常简单，是用
<img>、<map>、<area>标签实现的。小黑子，终于露出鸡脚了吧~
原理
先将原理进行公布
用img的usemap属性跟map标签进行绑定,在map标签内用arae标签进行定位图像的坐标(coords属性)切割图像区域
知道效果的原理，那就聚焦到相关属性。
img的usemap
usemap用于和图片相关的映射（也就是map标签）关联，格式是#name。有一个限制，就是此时的img标签不能是a标签和button的后代元素。
map标签
充当一个映射，和<area>标签映射图片的不同区域，map的name属性，也就关联上面提到的img的usemap的#name
area标签
area标签就是图像映射的关键了，主要描述的属性是shape、coords、href和target。
href属性和target属性跟学过的a标签的相关属性一样，主要是定义点击图片区域的要打开的资源和跳转方式。
shape就是图片区域的形状，分别有圆形circle、多边形polygon（可以简写poly）、矩形rectangle（可以简写成rect）。
coords是图像坐标描述方式了，坐标方式跟图形区域shape取值有关，坐标用的是canvas坐标系，以图片的左上角为原点（哈哈，不同于webgl坐标系欧）：
- 当
shape是cirle,coords则可以取x,y,r对应区域x坐标、y坐标、radis半径 - 当
shape是retangle，coords则是x1,y1,x2,y2，对应区域左上角坐标和右下角坐标 - 当
shape是polygon，coords则是x1,y1,x2,y2,x3,y3....，对应多边形的多个顶点
参考文献：
The Image Map Area element - HTML: HyperText Markup Language | MDN (mozilla.org)
HTML 标签的 coords 属性 (w3school.com.cn)
