📅  最后修改于: 2023-12-03 15:31:11.103000             🧑  作者: Mango
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 标签的介绍,希望能对你有所帮助。