Open In App

HTML <img> usemap Attribute

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
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=
         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=
              alt="Triangle">
 
        <area shape="circle" coords="155, 56, 26"
              href=
              alt="Circle">
 
        <area shape="rect" coords="224, 30, 276, 82"
              href=
              alt="Square">
    </map>
</body>
 
</html>


Output: 
 

 <img> usemap attribute example output

Supported Browsers



Last Updated : 11 Mar, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads