ES6 Image Map

Last Updated : 03 Jan, 2023

Image map in JavaScript is used to navigate various links to other web pages or some sections of the same web page from any image on that web page. Which is let an image on a web page, this image divided into several sections, each section is corresponding to some links, after clicking on those section of that image, the links are opened. This sections of image is refer as image map. This sections have different shapes such as rectangle, circle etc. The image is inserted into the web page using <img> tag and under this tag there is a attribute called usemap which defines the map description into that image. In simple words, the usemap attribute calls the map description which is applied to the image. This map is defined in such a way that the image is divided into some sections. These sections are defined by specifying coordinates of pixels, which defines the boundaries of each clickable sections. There is an another tag <area> which is defined under the map. Under this <area> tag the coordinates and the shapes of each section are defined. This sections are referred as hotspot. Syntax:

<img src="GFG.jpg" usemap=#mapName>
<map name="mapName">
    <area shape=shapeName coords="x, y" />
    <area shape=shapeName coords="x, y, r" />
</map>

Below example illustrate the image map in ES6:

Example:

html

<!Doctype html>
<html>
<head>
    <script type="text/javascript">
        function fn(name) {
            document.getElementById("typ").innerHTML = name;
        }
    </script>
</head>

<body>
    <center>
        <h1 style="color:green;">GeeksforGeeks</h1>
        <b>Mouseover on rectangle and circle</b>
        <br>
    <span id="typ" style="color:#008000;"></span>
    <br>
    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200309123213/sample16.png"
         width="600" height="auto" usemap=#gfg>
  
    <!--image in which the section are created-->
    <map name="gfg">
        
        <!-- area tag -->
        <!--coordinates are defined for
           "rectangle" and "circle"-->
        <area shape="rect" coords="75, 60, 250, 200"
              onmouseover="fn('RECTANGLE')" 
              onmouseout="fn('')" />
        <area shape="circle" 
              coords="500, 80, 110" 
              onmouseover="fn('CIRCLE')" 
              onmouseout="fn('')">
    </map>
</body>

</html>

Output: In this code coordinate 75, 60, 250, 200 refers to the rectangle and coordinate 500, 80, 110 refers to the circle. In the image the sections corresponding to the coordinates are created, into which the events are happen.

Example 2: In this example, we will open a link using image map.

html

<!Doctype html>
<html>
<head>
    <script type="text/javascript">
        function fn(name) {
            document.getElementById("typ").innerHTML = name;
        }
    </script>
</head>

<body>
    <center>
        <h1 style="color:green;">GeeksforGeeks</h1>
        <b>Mouseover on rectangle and circle</b>
        <br>
    <span id="typ" style="color:#008000;"></span>
    <br>
    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200309123213/sample16.png"
         width="600" height="auto" usemap=#gfg>
  
    <!--image in which the section are created-->
    <map name="gfg">
        
        <!-- area tag -->
        <!--coordinates are defined for "rectangle" and "circle"-->
        <area shape="rect" coords="75, 60, 250, 200"
              href="https://ide.geeksforgeeks.org/tryit.php"
              onmouseover="fn('RECTANGLE')" 
              onmouseout="fn('')" />
        <area shape="circle" 
              coords="500, 80, 110" 
              onmouseover="fn('CIRCLE')" 
              onmouseout="fn('')">
    </map>
</body>

</html>

Output:

Blaze UI Images

SoumikMondal

Improve

Article Tags :

ES6 Image Map

Similar Reads

Thank You!

What kind of Experience do you want to share?