What does the usemap attribute do in HTML <img> Tag ?
The “usemap” attribute in <img>
tags is used to associate an image with a client-side image map. This attribute specifies the name or URL of the <map>
element that defines clickable regions within the image. Client-side image maps allow users to interact with specific areas of an image by clicking on predefined regions.
Syntax
<img src="image.jpg" usemap="#map_name">
Where,
"image.jpg"
is the URL of the image file."#map_name"
is the name of the associated<map>
element, preceded by a pound sign (#).
Key Point of usemap Attribute
Key Point | Description |
---|---|
Client-side Image Map | The “usemap” attribute associates an image with a client-side image map, allowing users to interact with specific regions of the image. |
Clickable Regions | The <map> element defines clickable regions within the image, known as hotspots, which users can interact with by clicking. |
Accessibility | Client-side image maps provide accessibility benefits by allowing developers to provide alternative text for each hotspot and ensuring keyboard navigation support. |
Compatibility | Client-side image maps are widely supported in modern browsers and offer greater flexibility and ease of implementation compared to server-side image maps. |
Features
- Defining Clickable Regions: Define clickable regions within the image using the associated
<map>
element, which contains<area>
elements defining the coordinates and shape of each hotspot. - Alternative Text: Provide descriptive alternative text (
alt
attribute) for each<area>
element to enhance accessibility for users with disabilities or when images are not displayed.