HTML中的<map>
标签用于定义一个客户端图像映射,它可以将一个图像分割成若干个区域,并为每个区域定义一个超链接。当用户点击图像中的不同区域时,将会跳转到不同的链接或执行不同的JavaScript代码。
<map>
标签必须与<img>
标签配合使用,使用<map>
标签时,需要在<img>
标签中添加usemap
属性,并指向定义该图像映射的<map>
标签的id
。例如:
<img src="example.png" usemap="#examplemap">
<map name="examplemap">
<area shape="rect" coords="0,0,50,50" href="http://www.example.com">
<area shape="circle" coords="100,100,50" href="http://www.example.org">
</map>
在上面的例子中,<img>
标签中的usemap
属性指向<map>
标签的name
属性,定义了一个名为examplemap
的图像映射。<map>
标签中定义了两个<area>
标签,分别定义了一个矩形区域和一个圆形区域,并为它们分别指定了一个超链接。
<area>
标签中的shape
属性指定了区域的形状,可以是矩形、圆形、多边形等,不同的形状需要指定不同的coords
属性,以定义区域的坐标。<area>
标签中的href
属性指定了该区域的超链接地址。
使用图像映射可以使网页中的图像交互性更强,增加用户体验。