HTML - 图像映射

原创

admin 4个月前 (08-07) 阅读数 22 #HTML

HTML - 图像映射

图像映射

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

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

图像映射的用途

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

通过在图像内定义可点击区域来创建交互式图形非常有用。这允许用户与图像的不同部分交互，触发特定的操作或链接。

HTML <map> 标签

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

语法

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

<map name="world map">
   <!-- 在此处定义您的可点击区域 -->
</map>

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

在图像映射中定义区域（形状）

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

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

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

1. 矩形区域

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

语法

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

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

2. 圆形区域

您可以通过将circle值分配给shape属性来定义圆形形状。圆形形状需要中心坐标（x、y）和半径（r），您可以在coords属性中定义这些值。

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

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

3. 多边形区域

您可以通过将poly值分配给shape属性来定义多边形形状。多边形形状需要一系列坐标来形成形状，您可以在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>图像映射示例</title>
</head>
<body>
   <img src="/images/logo.png" usemap="#image_map">
   <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>
</body>
</html>