How to specify an image as a server-side image-map in HTML ?

Last Updated : 08 Jun, 2021

In image mapping, an image is specified with certain set of coordinates inside the image which act as hyperlink areas to different destinations. It is different from an image link since in image linking, an image can be used to serve a single link or destination whereas in a mapped image, different coordinates of the image can serve different links or destinations.

The <map> element is used to define the map-image on user interface which is clickable. The <map> required the <img> tag that helps the relation between the image and map. The <map> element contains a number of <area> elements that define the clickable areas in the image map.

Example:

HTML

<!DOCTYPE html> 
<html> 
 
<head> 
    <title>
        How to Specify an image as 
        a server-side image-map?
    </title> 
</head> 
 
<body style="text-align:center;"> 
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
     
    <h2>
        How to Specify an image as 
        a server-side image-map?
    </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 tag contained image. -->
        <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>