Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will discuss an image map in  HTML, along with understanding its implementation through the examples.

An Image Map refers to the clickable image having a clickable area that can be used to navigate to the various link 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=
        alt="gfgimage" usemap="#mapID">
  
    <map name="mapID">
        <area shape="rect" coords="34, 44, 270, 350"
    </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>
  
<body style="text-align:center">
    <h2 style="color:green;">
        GeeksforGeeks
    </h2>
      
    <img src=
        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=
            alt="Triangle">
  
        <area shape="circle" coords="155, 56, 26" href=
            alt="Circle">
  
        <area shape="rect" coords="224, 30, 276, 82" href=
            alt="Square">
    </map>
</body>
</html>


Output:

 



Last Updated : 23 May, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads