如何在 HTML 中的图像顶部添加命中图？

HTML 是一种标记语言，用于设计网页。当我们需要使图像也用作链接时，我们使用标签，但在此标签中，我们的整个图像仅链接到一个页面。如果我们想让图像的每一部分都链接到不同的资源，我们会怎么做？所以，这个地图标签出现在图片中。使用地图，我们可以在图像上创建不同的可点击区域。它包含几个活动区域，每个区域都链接到图像的不同部分。

在 HTML 中的图像上添加命中图的步骤：

插入图片：首先，使用 标签插入图片，并在 img 标签内添加usemap属性，如下所示。

---

创建地图：添加图像后，使用标签添加地图元素，并使用name属性将图像链接到该地图，并使用我们在usemap属性中使用的相同值，如下所示。

HTML

现在在地图标签中添加属性：我们将在地图标签中使用以下属性。

• area - 我们将通过这个标签创建可点击的区域。
  • 形状——我们将在这些值的帮助下定义区域内的形状：矩形、圆形、多边形、默认值。
  • coords – 我们将根据形状以像素为单位定义可点击区域的坐标。
    • rect – 我们将使用提供两个坐标，分别是左上角和右下角的 x 和 y 坐标。
    • circle - 我们将提供中心的 x 和 y 坐标，然后是半径的长度
    • poly - 我们提供每个角的 x 和 y 坐标。所以我们必须至少取6个值。
    • 默认 - 它占据整个图像。
  • href - 我们将使用此标签来指定区域将指向的位置以及它将打开哪个链接。

在图片顶部创建地图的 HTML 代码：在下图中，如果您单击红色部分，它将打开 Geeksforgeeks.org，但当您单击绿色部分时，它将打开 Google.com。

我们使用了两个矩形形状的区域标签，并根据位置声明了它们的坐标值。我们需要分配给 Geeksforgeeks 或 google。之后，我们使用 href 标签打开他们的网页链接。下面提到了相同的代码。

HTML

输出：

文章的要点：

• 首先，检查要使用命中图的图像尺寸，然后根据该尺寸使用坐标。
• name属性的值必须与您将在 img 标记的 usemap 中使用的值相同。
• 在 shape 属性中使用rect、circle 和 poly值。
• 使用地图属性内的区域。