Html 简明教程

HTML - Image Map

HTML 中的图像地图允许图像的特定区域可点击，充当到不同目的地的链接。此技术可用于在网页上创建复杂的导航系统或交互式图形。

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

Why to use Image Map?

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

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

HTML <map> Tag

在 HTML 中， * <map>* 标记用于创建客户端图像映射，将图像的特定区域转换为交互式元素。这允许用户单击图像的不同区域，从而触发各种操作。 <map> 元素充当 <area> 元素的容器，每个 <area> 元素使用特定属性定义一个可点击区域。

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

当与 * <img>* 标记配合使用时， * <map>* 标记在图像及其关联映射之间建立连接。这使得 Web 开发人员可以通过在图像中定义不同的可点击区域来创建动态和交互式内容。

HTML <area> Tag

HTML 中的 * <area>* 标记在 <map> 元素内使用，用于定义图像上的可点击区域。它为每个可点击区域指定形状、坐标和关联的操作。

Syntax

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

Rectangular Area

如果需要矩形区域，我们必须将 "rect" 传递为值。矩形需要左上角和右下角的坐标。

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

  1. x1, y1: 左上角的坐标。

  2. x2, y2: 右下角的坐标。

Circular Area

如果需要圆形区域，我们必须将“圆”传递为值。圆需要中心坐标和半径。

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

  1. x, y: 圆心坐标。

  2. r: 圆的半径。

Polygon Area

"poly" 如果需要多边形的面积，则必须传递作为值。多边形需要一系列坐标来形成形状。这可用于创建任何形状，无论是芒果还是苹果。

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

其中， x1, y1, …​, xn, yn: 形成多边形的坐标。

这些形状能够创建交互式图像地图，通过将特定区域与图像中的特定操作相关联，从而增强用户参与度。

HTML Image Map

要在 HTML 中创建图像地图，请按照下列步骤使用代码示例。

  1. Step 1 - Prepare your image: 从您想要变成图像地图的图像开始。对于此示例，让我们使用名为“page.jpg”的图像。

  2. Step 2 - Define the image map: 使用 &lt;map&gt; 标记定义图像地图，并使用 name 属性为其指定唯一名称。

  3. Step 3 - Define clickable areas: 在 &lt;map&gt; 元素中，您可以使用 &lt;area&gt; 标记定义可单击区域。指定形状（矩形、圆形或多边形）、坐标以及要链接到的 URL。这是一个带有可单击矩形的示例。

为要在图像中创建的每个可单击区域重复 Step 3 。关闭 HTML 文件并将其另存为扩展名为 .html。

Example

<!DOCTYPE html>
<html>

<head>
    <title>Image Map Example</title>
</head>

<body>
    <img src=
"https://www.tutorialspoint.com/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>

执行上述示例后，将显示一个带有 Tutorialspoint 徽标的页面。如果您单击徽标中的圆圈，页面将重定向到 tutorialspoint 主页，如果您单击 “tutorials” （矩形区域地图），将重定向到我们的教程库。

您可以添加更多 ‘<area>’ 元素来在图像上创建不同的可单击区域，根据您的要求将它们连接到不同的 URL 或操作。这为您的网站访问者提供了一种互动体验。