如何使用 JavaScript 创建客户端图像地图？

在本教程中，我们将了解如何使用 JavaScript 创建客户端图像地图。

我们使用 JavaScript 创建客户端图像地图。客户端图像地图通过 `` 标签的 usemap 属性启用，并由特殊的 `` 和 `` 扩展标签定义。

要构成地图的图像使用 `` 元素像往常一样插入页面，除了它带有名为 usemap 的额外属性。usemap 属性的值是 `` 元素的 name 属性的值，您即将遇到它，前面带有井号或哈希符号。

在讨论过程之前，让我们先了解什么是图像地图。

图像地图是将图像分解成各个部分的过程，每个部分都引用不同的文件或指向不同网页的链接。图像中的这些部分是用户可以点击并访问该部分包含的特定文件或网页的区域。我们需要在我们的 HTML 文档中手动实现它，这就是它被称为客户端图像地图的原因。

在创建图像地图时，我们需要使用以下 HTML 标签：

  • img 标签 - img 标签通常用于在文档中嵌入图像。但是这次，我们将使用带有名为 usemap 的特殊属性的 img 标签，该属性接受传递给 img 标签中 usemap 属性的 map 标签 name 属性的值，前面带有井号或哈希符号，如下面的语法所示：

<img src="image address" alt="alternate name" usemap="#nameAttributeValue">

  • map 标签 - map 标签用于创建图像地图，它将地图与图像链接起来，将 name 属性的值作为 img 标签中 usemap 属性的值传递，语法如下所示：

<map name="value"></map>

  • area 标签 - area 标签用于定义图像中的不同区域部分。此标签采用 href 属性来指定它包含的文件或页面的地址。我们可以使用 shape 属性为 area 标签赋予矩形、圆形和多边形之外的特定 形状，并使用 coords 属性指定其在图像上的位置，如下所示：

<area shape="shape" coords="a, b, a1, b1" href="file or web page address" alt="alternate name">

让我们了解一下，如何通过使用代码示例实际实现来使用 JavaScript 创建客户端图像地图：

算法

  • 步骤 1 - 在第一步中，我们将定义一个带有 usemap 属性的 img 标签，如上语法所示。

  • 步骤 2 - 在下一步中，我们将定义一个带有 name 属性的 map 标签，并将相同的值赋予 map 标签的 name 属性和 img 标签的 usemap 属性。

  • 步骤 3 - 在第三步中，我们将使用带有上述语法中指定的属性的 area 标签在图像上创建不同的热点，并为它们提供相关的值。

  • 步骤 4 - 在最后一步中，我们将添加功能以使用 JavaScript 在用户屏幕上显示输出。

示例 1

在下面的示例中，我们使用 JavaScript 创建了一个客户端图像地图。

Open Compiler
<html>
<head>
   <title>Using JavaScript Image Map</title>
   <script type="text/javascript">
      function showTutorial(name) {
         document.myform.stage.value = name
      }
   </script>
</head>
<body>
   <form name="myform">
      <input type = "text" name = "stage" size = "20" />
   </form>

   <!-- Create Mappings -->
   <img src="https://tutorialspoint.com/images/usemap.gif"
   alt="HTML Map"
   border="0"
   usemap="#tutorials"/>

   <map name="tutorials">
      <area shape="poly"
      coords="74,0,113,29,98,72,52,72,38,27"
      href="https://tutorialspoint.com/perl/index.htm"
      alt="Perl Tutorial"
      target="_self"
      onMouseOver="showTutorial('perl')"
      onMouseOut="showTutorial('')"/>

      <area shape="rect"
      coords="22,83,126,125"
      href="https://tutorialspoint.com/html/index.htm"
      alt="HTML Tutorial"
      target="_self"
      onMouseOver="showTutorial('html')"
      onMouseOut="showTutorial('')"/>

      <area shape="circle"
      coords="73,168,32"
      href="https://tutorialspoint.com/php/index.htm"
      alt="PHP Tutorial"
      target="_self"
      onMouseOver="showTutorial('php')"
      onMouseOut="showTutorial('')"/>
   </map>
</body>
</html>

在上面的示例中，如果您将鼠标光标移到图像的不同位置，您会发现输入栏的文本值相应地发生变化，如果您点击特定位置，您会发现自己位于该位置包含的页面或文件上。

让我们看另一个代码示例，以完全理解 JavaScript 创建客户端图像地图的实现：

示例 2

下面的示例将说明如何使用 JavaScript 创建图像地图：

Open Compiler
<!DOCTYPE html>
<html>
<body>
   <p> Hover over the different parts of the image below.</p>
   <p id="result"></p>

   <img src="https://www.nyongesasande.com/wp-content/uploads/2021/12/tutorials_point.jpeg" alt="HTML Map" border="0"
   usemap="#tutorials" />
   <map name="tutorials">

      <area shape="poly"
      coords="74,0,113,29,98,72,52,72,38,27"
      href="https://tutorialspoint.com/perl/index.htm"
      alt="Perl Tutorial"
      target="_self"
      onMouseOver="showTutorial('Perl Tutorials')"
      onMouseOut="showTutorial('none')" />

      <area shape="circle"
      coords="22,83,126,125"
      href="https://tutorialspoint.com/java/index.htm"
      alt="Java Tutorial"
      target="_self"
      onMouseOver="showTutorial('Java Tutorials')"
      onMouseOut="showTutorial('none')" />

      <area shape="rect"
      coords="373,68,32, 456"
      href="https://tutorialspoint.com/javascript/index.htm"
      alt="JavaScript Tutorial"
      target="_self"
      onMouseOver="showTutorial('JavaScript Tutorials')"
      onMouseOut="showTutorial('none')" />
   </map>
   <script>
      function showTutorial(name) {
         var result = document.getElementById("result");
         result.innerHTML = "This spot contains the link to the <b>" + name + " </b>page."
      }
   </script>
</body>
</html>

在此示例中，我们更改了图像上由 area 标签定义的热点的形状，还更改了这些热点在用户点击后将引用的页面的链接。

在本教程中，我们了解了如何使用 JavaScript 创建客户端图像地图。我们已经看到了该方法的实际实现，并提供了两个不同的代码示例来创建图像地图，以便我们更好地理解它，并且不会有任何困惑。我们可以在图像上创建任意数量的热点，并为它们提供指向不同页面的链接。

更新于：2022-11-25

1K+ 次浏览

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告