<map> 标签通常与 <img> 标签结合使用。以下是一个简单的示例:
<!DOCTYPE html>
<html>
<head>
<title>图像地图示例</title>
</head>
<body>
<h2>点击图像中的不同区域:</h2>
<img src="world-map.jpg" alt="World Map" usemap="#worldmap" width="600" height="400">
<map name="worldmap">
<area shape="rect" coords="0,0,300,200" alt="North America" href="north-america.html">
<area shape="circle" coords="400,200,100" alt="Europe" href="europe.html">
<area shape="poly" coords="300,300,500,350,400,400,300,350" alt="Asia" href="asia.html">
</map>
</body>
</html>
在这个例子中:
- <img> 标签显示了一张世界地图的图像,并通过 usemap 属性引用了一个名为 "worldmap" 的图像地图。
- <map> 标签定义了图像地图,其中的 <area> 标签定义了不同的可点击区域,分别用于北美洲、欧洲和亚洲。每个 <area> 标签都有 shape 属性用于指定区域的形状(矩形、圆形、多边形等)以及 coords 属性用于指定区域的坐标。
- 每个 <area> 标签都有一个关联的 href 属性,指定了用户点击该区域时要跳转的链接。
图像地图提供了一种在图像上实现交互性的方式,但在现代Web开发中,由于使用CSS和JavaScript可以更灵活地创建交互性,图像地图的使用相对较少。
转载请注明出处:http://www.zyzy.cn/article/detail/3873/HTML