HTML - 图片地图

图片地图

HTML 图片地图 由<map>标签定义。图片地图使图像的特定区域可点击，充当指向不同目标的链接。此技术可用于在网页上创建复杂的导航系统或交互式图形。

通过在图像内定义各种形状（矩形、圆形和多边形），每个形状都有其自己的关联链接，开发人员可以创建动态且交互式的视觉内容，从而增强用户参与度和导航体验。

图片地图的用途

图片地图可用于创建复杂的导航、交互式图表或引人入胜的视觉体验，从而增强网页的用户参与度和交互性。

它可用于通过在图像中定义可点击区域来创建交互式图形。这允许用户与图像的不同部分进行交互，从而触发特定操作或链接。

HTML <map> 标签

<map> 标签用于创建客户端图像地图，将图像的特定区域转换为交互式元素。这允许用户点击图像的不同区域，从而触发各种操作。<map> 元素用作 <area> 元素的容器，每个 <area> 元素都定义了一个具有特定属性的可点击区域。

语法

以下是 <map> 标签的语法：

<map name="world map">
   <!-- Define your clickable areas here -->
</map>

与 <img> 标签结合使用时，<map> 标签会在图像及其关联地图之间建立连接。这使 Web 开发人员能够通过在图像中定义不同的可点击区域来创建动态且交互式的内容。

在图片地图中定义区域（形状）

<area> 标签用于在 <map> 标签内定义图像上的可点击区域。它指定每个可点击区域的形状、坐标和关联操作。

以下是 <area> 标签的语法：

<area shape="shape_values" coords="coordinates" href="url" alt="Description">

1. 矩形区域

您可以通过为 shape 属性赋值 rect 来定义矩形形状。矩形形状需要左上角和右下角的坐标，您可以在 coords 属性中定义。

语法

<area shape="rect" coords="x1,y1,x2,y2" href="url" alt="Description">

x1, y1 - 左上角的坐标。
x2, y2 - 右下角的坐标。

2. 圆形区域

您可以通过为 shape 属性赋值 circle 来定义圆形形状。圆形形状需要中心坐标（x，y）和半径（r），您可以在 coords 属性中定义。

<area shape="circle" coords="x,y,r" href="url" alt="Description">

x, y - 圆心的坐标。
r - 圆的半径。

3. 多边形区域

您可以通过为 shape 属性赋值 poly 来定义多边形形状。多边形形状需要一系列坐标来构成形状，您可以在 coords 属性中定义。

这可以用来创建任何形状，无论是芒果还是苹果。

语法

<area shape="poly" coords="x1,y1,x2,y2,..,xn,yn" href="url" alt="Description">

其中 x1, y1,..., xn, yn 坐标构成多边形。

这些形状可以创建交互式图片地图，通过将不同的操作与图像内的特定区域关联来增强用户参与度。

在 HTML 中创建图片地图

要在 HTML 中创建图片地图，请按照以下步骤操作并查看代码示例：

步骤 1：准备您的图像

从您要用作图片地图的图像开始。在本例中，我们将使用名为 logo.png 的图像文件。

在 <img> 标签中使用 usemap 属性，通过将其值设置为 <map> 的 name 属性来将图像链接到 <map> 标签。

<img src="/images/logo.png" usemap="#image_map">

步骤 2：定义图片地图

使用 <map> 标签定义图片地图，并使用 name 属性为其指定一个唯一的名称。

<map name="image_map">
</map>

步骤 3：定义可点击区域

在 <map> 元素内，使用 <area> 标签定义可点击区域。指定形状（rect、circle 或 poly）、坐标以及要链接到的 URL。

<map name="image_map">
  <area shape="circle" coords="45,32,49" href="index.htm" alt="tutorialspoint">
  <area shape="rect" coords="245,50,85,9" href="/tutorialslibrary.htm" alt="tutorials_library">
</map>

对要在图像中创建的每个可点击区域重复**步骤 3**。最后，关闭 HTML 文件并将其保存为 .html 扩展名。

HTML 图片地图示例

此示例创建一个 HTML 图片地图，其中图像 (logo.png) 上的特定区域使用 <map> 元素内的 <area> 标签链接到不同的页面。

<!DOCTYPE html>
<html>
<head>
   <title>Image Map Example</title>
</head>
<body>
   <img src="/images/logo.png" usemap="#image_map">
   <map name="image_map">
      <!-- Define your clickable areas here -->
      <area shape="circle" coords="45,32,49" href="/index.htm" alt="tutorialspoint">
      <area shape="rect" coords="245,50,85,9" href="/tutorialslibrary.htm" alt="tutorials_library">
   </map>
</body>
</html>

打印页面