起因
最近不是流行结婚登报嘛,抱着凑热闹的心态,看看本地的报纸期刊的官网。其中,有一个效果比较有意思,点击报纸中的相关区域跳转到对应的新闻
。
每一天的新闻版面都不一样,如果是不断修改代码实现就非常简单,但是每天一改并不现实,肯定有相关的模板的。好好好,既然不会,那我就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)