JavaScript 如何创建图像映射

图像映射实际上是将图像分割成各种 热点区域 ，每个热点区域都将指向不同的文件。热点区域是我们使用 < area>标签在图像上创建的可点击区域。这种类型的映射称为客户端图像映射，因为映射是嵌入在HTML中的。

方法: 下面是逐步实现在JavaScript中创建图像映射的步骤。

步骤1: 第一步是使用 < img>标签插入图像。在这里，我们将使用一个额外的属性 “usemap” 。usemap的值必须以 “#” 标签开头，后面是映射的名称，如下所示。

语法:

<img src="map1.jpg" alt="Cocktails" 
usemap="#mymap" width="600" height="400">

步骤2： 然后我们使用 < map>标签创建一个图像映射。这样就可以创建一个使用必需的name属性与图像关联的映射。name属性的值必须与标签的usemap属性中给出的值相同。

语法：

<map name="mymap">

步骤3： 不同的可点击区域是通过使用 **

** 标签创建的。我们必须定义区域的形状。不同的形状有矩形、圆形和多边形。还必须给出区域的坐标，并且 href 是当用户点击该区域时将打开的链接。

语法：

<area shape="rect" coords="x,y,x,y" href="">
<area shape="circle" coords="x,y,r" href="">
<area shape="poly" coords="" 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： 在这个示例中，我们将简单地创建一个包含矩形和圆形图像的图像地图。

HTML

<!DOCTYPE html> 
<html> 
  <body> 
    <img
      src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20210824153314/imagemap1-211x300.png"
      alt="Cocktails"
      usemap="#mymap"
      width="400"
      height="500"/> 
    <map name="mymap"> 
      <area
        shape="rect"
        coords="167,22,380,113"
        alt="Write"
        href="https://write.geeksforgeeks.org/"
        onmouseover="myFunction('Write for Us!!')"
        onmouseout="myFunction('')"/> 
      <area
        shape="rect"
        coords="148,423,382,500"
        alt="Practice"
        href="https://practice.geeksforgeeks.org/"
        onmouseover="myFunction('Practice and Learn')"
        onmouseout="myFunction('')"/> 
      <area
        shape="circle"
        coords="115,260,40"
        alt="IDE"
        href="https://ide.geeksforgeeks.org/"
        onmouseover="myFunction('IDE')"
        onmouseout="myFunction('')"/> 
    </map> 
    <h1 id="info"></h1> 
    <script> 
      function myFunction(name) { 
        document.getElementById("info").innerHTML = name; 
      } 
    </script> 
  </body> 
</html>

输出：

JavaScript 如何创建图像映射

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

HTML

<!DOCTYPE html> 
<html> 
  <body> 
    <img
      src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20210824153724/imagemap2-300x179.png"
      alt="Polygon"
      usemap="#map1"
      width="600"
      height="433"/> 
    <map name="map1"> 
      <area
        shape="poly"
        coords="152,244,160,180,251,133,368,123,495,117,551,185, 
                467,278,396,303,311,298,230,292,169,268" 
        alt="Polygon"
        href="https://www.geeksforgeeks.org/"
        onmouseover="myFunction('A Computer Science portal for geeks.  
                     It contains well written, well thought and well  
                     explained computer science and programming 
                     articles')" 
        onmouseout="myFunction('')"
      /> 
    </map> 
    <h1 id="info"></h1> 
    <script> 
      function myFunction(name) { 
        document.getElementById("info").innerHTML = name; 
      } 
    </script> 
  </body> 
</html>

输出:

JavaScript 如何创建图像映射