跳到主要内容

HTML 图像映射

HTML图像映射（Image Map）是一种将图像划分为多个可点击区域的技术。每个区域可以链接到不同的URL或执行不同的操作。这种技术常用于创建交互式图像，例如地图、图表或带有多个链接的图片。

什么是图像映射？​

图像映射允许你将一张图片划分为多个区域，每个区域称为一个“热点”（hotspot）。用户点击这些热点时，可以触发特定的操作，例如跳转到另一个页面或显示更多信息。

图像映射的核心是 <map> 标签和 <area> 标签。<map> 标签定义了图像映射的名称和区域，而 <area> 标签定义了每个热点的形状、坐标和链接。

基本语法​

html
<img src="image.jpg" alt="示例图片" usemap="#exampleMap" />

<map name="exampleMap">
  <area shape="rect" coords="x1,y1,x2,y2" href="link1.html" alt="区域1" />
  <area shape="circle" coords="x,y,radius" href="link2.html" alt="区域2" />
  <area shape="poly" coords="x1,y1,x2,y2,x3,y3,..." href="link3.html" alt="区域3" />
</map>
  • img 标签中的 usemap 属性指向 <map> 标签的 name 属性。
  • <area> 标签中的 shape 属性定义了热点的形状，可以是 rect（矩形）、circle（圆形）或 poly（多边形）。
  • coords 属性定义了热点的坐标，具体格式取决于形状。

示例：创建一个简单的图像映射​

假设我们有一张图片，图片上有两个矩形区域和一个圆形区域。我们希望用户点击这些区域时跳转到不同的页面。

html
<img src="example.jpg" alt="示例图片" usemap="#exampleMap" />

<map name="exampleMap">
  <area shape="rect" coords="34,44,270,350" href="page1.html" alt="矩形区域1" />
  <area shape="rect" coords="290,44,520,350" href="page2.html" alt="矩形区域2" />
  <area shape="circle" coords="600,200,100" href="page3.html" alt="圆形区域" />
</map>

解释​

  • 第一个 <area> 标签定义了一个矩形区域，左上角坐标为 (34,44)，右下角坐标为 (270,350)。
  • 第二个 <area> 标签定义了另一个矩形区域，左上角坐标为 (290,44)，右下角坐标为 (520,350)。
  • 第三个 <area> 标签定义了一个圆形区域，圆心坐标为 (600,200)，半径为 100。

实际应用场景​

1. 交互式地图​

图像映射常用于创建交互式地图。例如，你可以将一张世界地图划分为多个国家或地区，用户点击某个国家时，跳转到该国家的详细信息页面。

html
<img src="world-map.jpg" alt="世界地图" usemap="#worldMap" />

<map name="worldMap">
  <area shape="poly" coords="100,200,150,250,200,200" href="country1.html" alt="国家1" />
  <area shape="poly" coords="300,200,350,250,400,200" href="country2.html" alt="国家2" />
</map>

2. 产品展示​

在电子商务网站中，图像映射可以用于展示产品的不同部分。例如，用户点击产品的某个部分时，可以查看该部分的详细信息。

html
<img src="product.jpg" alt="产品展示" usemap="#productMap" />

<map name="productMap">
  <area shape="rect" coords="50,50,200,150" href="part1.html" alt="部件1" />
  <area shape="rect" coords="250,50,400,150" href="part2.html" alt="部件2" />
</map>

总结​

HTML图像映射是一种强大的工具，可以为图像添加交互性。通过使用 <map> 和 <area> 标签，你可以轻松地将图像划分为多个可点击区域，并为每个区域定义不同的操作。

提示

使用图像映射时，确保为每个 <area> 标签添加 alt 属性，以提高可访问性。

附加资源与练习​

  • 练习1：尝试为一张图片创建三个不同形状的热点（矩形、圆形、多边形），并为每个热点添加不同的链接。
  • 练习2：使用图像映射创建一个简单的交互式地图，点击不同的区域时跳转到不同的页面。
备注

如果你想深入了解图像映射的更多细节，可以参考 MDN Web Docs 上的相关文档。