HTML | object usemap Attribute

Last Updated : 30 Sep, 2019

The HTML usemap attribute is used to specify the name of an image-map to use with the object. The image with some clickable areas is called image-map.
The usemap attribute is related to associate degree element’s name attribute and creates a relationship between the thing and also the map.

Syntax:

<object usemap="#mapname">

Attribute Values:
#mapname: A hash with map element’s name to use.

Example:

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>HTML img usemap Attribute</title> 
      
    <style> 
        body { 
            text-align: center; 
        } 
          
        h1 { 
            color: green; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
      
    <h2>HTML <img> usemap Attribute</h2> 
  
    <object src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20190227165729/area11.png"
        alt="" width="300" height="119" 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>