MDN HTML 地图 - HTML

HTML 地图是一个网页地图，通常用于向用户展示一个区域或位置。在 HTML 中，我们可以使用以下标记来创建地图：<map>、<area> 和 <img>。HTML 地图通常与 JavaScript 或 CSS 配合使用，以增强用户体验。

<map> 标记

<map> 标记定义一个客户端图像映射，它使用户能够单击区域以导航到链接的目标页面。

语法

<map name="map_name">
  <area shape="shape_type" coords="coordinates" href="url">
  ...
  <area shape="shape_type" coords="coordinates" href="url">
</map>

属性

• name： 定义地图的名称。

注意事项

• <map> 标记必须与 <img> 标记一起使用。
• <area> 标记必须紧接在 <map> 标记之后并缩进。

<area> 标记

<area> 标记定义图像映射中的区域，并将区域定义为超链接。

语法

<area shape="shape_type" coords="coordinates" href="url">

属性

• shape：定义区域的形状。可以是矩形（rect）、圆形（circle）或多边形（poly）。
• coords：定义区域的位置和大小。
• href：定义区域的目标 URL。

注意事项

• 单个地图可以包含多个连接区域。

<img> 标记

<img> 标记定义一个图像，用于在网页中显示地图。

语法

<img src="image_url" alt="image_description" usemap="#map_name">

属性

• src：指定图像源文件的 URL。
• alt：为图像提供替代说明文本。
• usemap：指定与 <map> 标记关联的 ID。

注意事项

• <img> 标记必须包含 usemap 属性，指定与 <map> 标记关联的 ID。

示例代码

<img src="example_map.jpg" alt="Example Map" usemap="#example_map">

<map name="example_map">
  <area shape="rect" coords="0,0,100,100" href="http://www.example.com/link1.html">
  <area shape="circle" coords="150,50,50" href="http://www.example.com/link2.html">
  <area shape="poly" coords="225,25,275,25,250,75,250,100,225,100" href="http://www.example.com/link3.html">
</map>

总结

HTML 地图提供了一种简单的方法，让用户更轻松地导航到特定的区域或位置。使用 <map>、<area> 和 <img> 标记，可以轻松创建和配置网页地图。同时，通过与 JavaScript 和 CSS 结合使用，可以实现更多的功能和效果，从而提高用户体验。