在 HTML 中使用图像映射可以让用户在图像上点击不同的区域,从而链接到不同的 URL 或执行不同的操作。要创建图像映射,需要使用 map
和 area
标签。
下面是一个使用图像映射的示例:
<img src="example.jpg" usemap="#map1">
<map name="map1">
<area shape="rect" coords="0,0,100,100" href="page1.html">
<area shape="circle" coords="150,150,50" href="page2.html">
<area shape="poly" coords="300,0,400,50,350,100" href="page3.html">
</map>
在这个示例中,img
标签引用了一个名为 example.jpg
的图像,并使用 usemap
属性将其与一个名为 map1
的图像映射关联。
map
标签定义了图像映射,其中的 name
属性与 usemap
属性中引用的名称一致。
area
标签定义了图像映射中的各个区域,其中的 shape
属性指定了形状(可以是矩形、圆形或多边形),coords
属性指定了区域的坐标,href
属性指定了链接的目标 URL。
需要注意的是,area
标签必须放在 map
标签内部,并且 area
标签只能用于与 img
标签相关联的 map
标签中。
通过使用图像映射,可以为用户提供更加直观的操作方式,提高用户体验。