HTML DOM Map 对象

HTML <map> 对象用于定义图像映射，即将图像的不同区域链接到不同的 URL。当用户点击图像的某个区域时，会触发相应的链接跳转或其他操作。

创建 <map> 对象

要创建一个 <map> 对象，需要在 HTML 文件中使用 <map> 标签，并设置其 name 属性，以便将其与对应的 标签关联起来。

示例代码如下：

<img src="example.jpg" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="0,0,50,50" href="page1.html" alt="Area 1">
  <area shape="circle" coords="100,100,50" href="page2.html" alt="Area 2">
</map>

在上面的示例中，我们创建了一个名为 "map1" 的 <map> 对象，并定义了两个区域（一个矩形区域和一个圆形区域），分别链接到不同的页面。

<area /> 标签

在 <map> 对象中，我们使用 <area /> 标签来定义图像的不同区域。每个 <area /> 标签通常包含以下属性：

• shape：定义区域的形状，可以是 "rect"（矩形）、"circle"（圆形）、"poly"（多边形）等。
• coords：定义区域的坐标，具体取决于区域的形状。
• href：定义区域被点击时要跳转的 URL。
• alt：定义区域的替代文本，用于辅助技术和当图像无法显示时显示。

示例代码如下：

<map name="map1">
  <area shape="rect" coords="0,0,50,50" href="page1.html" alt="Area 1">
  <area shape="circle" coords="100,100,50" href="page2.html" alt="Area 2">
</map>

在这个示例中，我们定义了两个区域，一个是左上角的矩形区域，链接到 "page1.html" 页面；另一个是圆心在 (100,100) 处、半径为 50 的圆形区域，链接到 "page2.html" 页面。

使用 <map> 对象和 <area /> 标签可以实现图像的交互功能，为用户提供更好的浏览体验。