Skip to content
Related Articles

Related Articles

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

Improve Article
Save Article
  • Last Updated : 08 Jun, 2021
Improve Article
Save Article

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.



<!DOCTYPE html>
        How to Specify an image as
        a server-side image-map?
<body style="text-align:center;">
    <h1 style="color:green;">
        How to Specify an image as
        a server-side image-map?
    <img src=
        class="aligncenter size-medium wp-image-910965"
        usemap="#shapemap" />
    <map name="shapemap">
        <!-- area tag contained image. -->
        <area shape="poly"
        <area shape="circle"
        <area shape="rect"


Before click on specific clickable area: 

After click on specific clickable area: 

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!