What is image map & how to map the image in HTML ?

Last Updated : 29 Jul, 2024

In this article, we will discuss an image map in HTML, along with understanding its implementation through examples. An Image Map refers to the clickable image having a clickable area that can be used to navigate to the various links to other web pages or the specific section of the same web page. The <map> tag can be used to define the image map & the clickable area inside the image can be defined with the <area> tag.

Syntax:

<map name="map-name"></map>

Attribute value:

name: It is used to associate the map with the image in which it is used.

Note: The name attribute in the map must have the same value as the image’s usemap attribute.

In order to map the image with different image areas, we need to specify the particular shape & associated coordinate points. Along with this, we also need to link the image using the <img> tag.

Example 1: In this example, the highlighted area is the mapped area, clicking on it will lead to the website. We can also use an area tag with an image map. It is used to direct the user to different links after the user clicks on the mapped portions of the image. It is used as a child tag of the <map> tag.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"
        content="IE=edge">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">    
</head>
 
<body>
    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/array-2.png"
        alt="gfgimage" usemap="#mapID">

    <map name="mapID">
        <area shape="rect" coords="34, 44, 270, 350"
href="https://www.geeksforgeeks.org/data-structures/">
    </map>
</body>
  
</html>

Output:

Example 2: In this example, we are creating a map of three shapes. If we click on each shape, then an image map figure is displayed.

HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"
        content="IE=edge">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">    
</head>
  
<body style="text-align:center">
    <h2 style="color:green;">
        GeeksforGeeks
    </h2>
    
    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190227165729/area11.png"
        alt="" width="300" height="119"    class=
    "aligncenter size-medium wp-image-910965" 
        usemap="#shapemap" />

    <map name="shapemap">

        <area shape="poly" coords="59, 31, 28, 83, 91, 83" href=
"https://media.geeksforgeeks.org/wp-content/uploads/20190227165802/area2.png"
            alt="Triangle">

        <area shape="circle" coords="155, 56, 26" href=
"https://media.geeksforgeeks.org/wp-content/uploads/20190227165934/area3.png"
            alt="Circle">

        <area shape="rect" coords="224, 30, 276, 82" href=
"https://media.geeksforgeeks.org/wp-content/uploads/20190227170021/area4.png"
            alt="Square">
    </map>
</body>
 
</html>