Skip to content
Related Articles

Related Articles

How to specify an image as a server-side image-map in HTML ?
  • Last Updated : 07 Sep, 2020
GeeksforGeeks - Summer Carnival Banner

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
        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:

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :