Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

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=
        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"
            alt="Triangle">
         
        <area shape="circle"
            coords="155,56,26"
            alt="Circle">
         
        <area shape="rect"
            coords="224,30,276,82"
            alt="Square">
    </map>
</body>
 
</html>

Output:



Before click on specific clickable area: 

After click on specific clickable area: 




My Personal Notes arrow_drop_up
Recommended Articles
Page :