<map> 标签是 HTML 中用于创建图像地图的标签。图像地图允许你在一张图像上定义可点击区域,并且为每个区域指定超链接或其他交互性操作。

<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