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

图像地图只不过是一张被分成各种热点的图像，每个热点都会带你到不同的文件。热点不过是我们使用标签在图像上创建的可点击区域。这种类型的地图称为客户端图像地图，因为地图嵌入在 HTML 本身中。

方法：下面是如何在 JavaScript 中创建图像映射的分步实现。

第 1 步：第一步是使用标签插入图像。在这里，我们将使用一个附加属性“ usemap ”。 usemap 的值必须以“#”标签开头，后跟映射名称，如下所示。

句法：

第 2 步：然后我们使用标签这将使用所需的名称属性创建一个链接到图像的地图。 name 属性值必须与 标签的 usemap 属性中给出的值相同。

句法：

第 3 步：使用标签创建不同的可点击区域。我们必须定义该区域的形状。不同的形状是矩形、圆形和多边形。该区域的坐标也必须给出， href是用户单击该区域时将打开的链接。

句法：

第4步：现在寻找图像的坐标。

• 矩形图像将具有坐标 x1,y1,x2,y2，其中 x1,y1 是左上角的坐标，x2,y2 是右下角的坐标，如图所示。
• 圆形图像将具有坐标 x,y,r，其中 x,y 是圆心的坐标，r 是圆的半径。
• 多边形图像将具有坐标 x1,y1,x2,y2,x3,y3,x4,y4,,……。其中 x,y 定义图像的一个角的坐标，如图所示。

示例 1：在此示例中，我们将简单地创建矩形和圆形图像的图像映射。

输出：

示例 2：在此示例中，我们将图像的黄色部分视为一个多边形。

HTML

  
    
    
      
    
    
    
      function myFunction(name) {
        document.getElementById("info").innerHTML = name;
      }
    
  

输出：