Open In App

HTML <img> usemap Attribute

Last Updated : 12 Jul, 2025
Comments
Improve
Suggest changes
3 Likes
Like
Report

The <img> usemap attribute specifies an image map to associate with an image. It allows you to define clickable areas within an image, linking different regions to specific URLs or actions. This attribute is crucial for creating interactive images on web pages and enhancing user engagement and navigation.

Note: When utilizing the <img> element within an <a> or <button> element, the usemap the attribute cannot be employed because it prevents conflicts between the interactive functionalities of the parent elements and the image mapping features.

Syntax

<img src="image.jpg" alt="Description of the image" usemap="#mapname">

Attribute Values

Attribute Values

Description

mapname

It is used to hold the map name containing the hash (#) character.

Example of <img> usemap attribute

Example: In this example we use <img> usemap attribute associates an image with a map element, defining clickable regions that link to different destinations when clicked, providing an interactive experience for users within the image.

html 
<!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>
  
    <img 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>

Output: 
 

<img> usemap attribute example output

Supported Browsers


J

jit_t
Improve
Article Tags :

Explore

Lightbox