📜  HTML map标签(1)

📅  最后修改于: 2023-12-03 15:31:11.103000             🧑  作者: Mango

HTML map标签

HTML map标签用于定义一个图像映射(image map),可以用于添加可点击区域到一个图像上。

语法

<map name="mapname">...</map>

name 属性定义这个映射的名称。

<area> 标签定义映射内的可点击区域,可以使用多个 <area> 标签定义多个可点击区域。

<img src="example.jpg" usemap="#example">
<map name="example">
  <area shape="rect" coords="0,0,100,100" href="link1.html">
  <area shape="circle" coords="150,150,50" href="link2.html">
</map>

上面的代码演示了如何使用 map 标签和 area 标签定义一个图像映射,其中:

  • img 标签中使用了 usemap 属性指向定义好的映射。
  • map 标签中使用了 name 属性指定了映射名称。
  • area 标签中使用了 shape 属性指定可点击区域的形状,coords 属性指定可点击区域相对于图像的坐标,href 属性指定点击后跳转的链接地址。
可点击区域的形状

shape 属性可以设置的可点击区域形状有:

  • rect:矩形。需要设置 coords 属性,格式为 x1,y1,x2,y2,表示矩形左上角和右下角的坐标。
  • circle:圆形。需要设置 coords 属性,格式为 x,y,r,表示圆形的圆心坐标和半径。
  • poly:多边形。需要设置 coords 属性,格式为 x1,y1,x2,y2,x3,y3,...,表示多边形各个点的坐标。
注意事项
  • 一个映射可以应用于多个图像,但一个图像只能应用于一个映射。
  • map 标签必须位于包含 img 标签的文档中。
  • 在使用 coords 属性时,坐标的单位应该与 img 标签的单位相同,通常是像素(px)。
  • 使用图像映射时应该考虑可访问性,应该为每个可点击区域添加相应的文本说明,以便于屏幕阅读器等辅助技术使用。

以上就是 HTML map 标签的介绍,希望能对你有所帮助。