Last Updated : 12 Jul, 2025
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 attributeExample: 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:
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4