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 标签的介绍，希望能对你有所帮助。