HTML usemap Attribute - HTML Attribute

Definition and Usage

The usemap attribute specifies an image (or an object) as an image map (an image map is an image with clickable areas).

The usemap attribute is associated with a <map> element's name or id attribute, and creates a relationship between the <img> and the <map>.

Note: The usemap attribute cannot be used if the <img> element is a descendant of an <a> or <button> element.

Applies to

The usemap attribute can be used on the following elements:

Elements	Attribute
<img>	usemap
<object>	usemap

Browser Support

The usemap attribute has the following browser support for each element:

How to add An image map, with clickable areas - HTML usemap Attribute

Click on the banner, the phone, or the cup of coffee to go to a new page and read more about the topic.

index.html

Example: HTML

 <img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>

Output should be:

How to add An <object> element using an image map - HTML usemap Attribute

Note: The usemap attribute of the object element is not supported in Chrome, Edge, Safari, and Opera.

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<h1>The object usemap attribute</h1>

<object data="https://horje.com/avatar.png" width="145" height="126" usemap="#planetmap"></object>

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

<p><b>Note:</b> The usemap attribute of the object element is not supported in Chrome, 
Edge, Safari, and Opera.</p>
 
</body>
</html>

Output should be:

html usemap attribute

Type:	Develop
Category:	Web Tutorial
Sub Category:	HTML Attribute
Uploaded by:	Admin

Read Article
https://develop.horje.com/learn/1434/reference