如何在 JavaScript 中创建图像映射？

JavaScript 可用于创建客户端图像映射。图像映射是网页上具有指向其他页面的多个链接的图像。这些链接称为热点。图像映射用于导航到其他页面或同一网页上的不同链接。

在图像映射中，可以将图像划分为不同的区域。我们可以为每个区域包含链接，点击某个区域后，它将打开相应的链接。区域可以划分为不同的形状，例如圆形、矩形或多边形。要创建矩形图像映射，我们需要两个不同的坐标，即右上角和左下角。同样，要创建五边形图像映射，我们需要五个坐标。

图像映射提供了一种在不创建图像文件的情况下链接图像各个区域的方法。usemap 属性用于 <img> 标签 中，用于在该图像中定义地图描述。此属性会调用应用于特定图像的地图描述。每个图像映射都有一个唯一的名称，因此我们必须在 MAP 元素中使用name 属性。

还有一个名为 <area> 标签 的标签，它定义了每个区域的坐标和形状。我们可以将诸如 onclick, ondblclick, onmouseover, onmouseout, onblur, 等事件与 <area> 标签一起使用。

用于定义图像映射的代码片段如下。

语法

现在，让我们看一些使用图像映射的示例，以便更清楚地理解它。

示例

在此示例中，我们使用一张图像来创建图像映射。我们将图像划分为矩形和圆形两种形状的两个区域。

第一个区域是图像的顶部区域，第二个区域是图像的中间区域。

输出

执行上述代码后，输出将是 -

点击顶部区域时，输出将是：

点击中间区域时，输出将是：

示例 2

在这里，我们将图像传递给 <area> 标签的 href 属性。这意味着当我们点击某个区域时，将显示相应的图像。

图像被划分为两个区域。第一个区域是图像的顶部区域，第二个区域是图像的中间区域。点击相应的区域时，首先会在给定的文本框中显示链接图像的名称，然后显示图像。

输出

执行上述代码后，输出将是 -

点击顶部区域时，输出将是：

点击中间区域时，输出将是：