图像映射:<area>标签带你哪里不会点哪里

34 阅读2分钟

起因

  最近不是流行结婚登报嘛,抱着凑热闹的心态,看看本地的报纸期刊的官网。其中,有一个效果比较有意思,点击报纸中的相关区域跳转到对应的新闻image.png    每一天的新闻版面都不一样,如果是不断修改代码实现就非常简单,但是每天一改并不现实,肯定有相关的模板的。好好好,既然不会,那我就F12看看文档结构。 image.png    可以发现,效果原理非常简单,是用<img><map><area>标签实现的。小黑子,终于露出鸡脚了吧~

原理

先将原理进行公布用img的usemap属性跟map标签进行绑定,在map标签内用arae标签进行定位图像的坐标(coords属性)切割图像区域

   知道效果的原理,那就聚焦到相关属性。

img的usemap

  usemap用于和图片相关的映射(也就是map标签)关联,格式是#name。有一个限制,就是此时的img标签不能是a标签和button的后代元素。

map标签

  充当一个映射,和<area>标签映射图片的不同区域,mapname属性,也就关联上面提到的img的usemap#name

area标签

  area标签就是图像映射的关键了,主要描述的属性是shapecoordshreftarget

  href属性和target属性跟学过的a标签的相关属性一样,主要是定义点击图片区域的要打开的资源和跳转方式。

  shape就是图片区域的形状,分别有圆形circle、多边形polygon(可以简写poly)、矩形rectangle(可以简写成rect)。 coords是图像坐标描述方式了,坐标方式跟图形区域shape取值有关,坐标用的是canvas坐标系,以图片的左上角为原点(哈哈,不同于webgl坐标系欧):

  • shapecirle,coords则可以取x,y,r对应区域x坐标、y坐标、radis半径
  • shaperetanglecoords则是x1,y1,x2,y2,对应区域左上角坐标和右下角坐标
  • shapepolygoncoords则是x1,y1,x2,y2,x3,y3....,对应多边形的多个顶点 image.png

参考文献:

The Image Map Area element - HTML: HyperText Markup Language | MDN (mozilla.org)

HTML 标签的 coords 属性 (w3school.com.cn)

img