HTML usemap Attribute

HTML usemap Attribute: This attribute specifies an image or as an image-map. While the usemap attribute is associated with an <map> element’s name or id attribute and creates a relationship between the <img> and the <map>.



HTML usemap Attribute

This attribute can be applied on <img> and <object> elements. And also the usemap attribute cannot be used if the <img> element is a descendant of an <a> or <button> element.

Browser Support

This attribute is supported by the following browsers:

  • Chrome
  • Firefox
  • Opera
  • Safari
  • Internet Explorer

Example: for <img> element

<!DOCTYPE html>
<html>
<body>
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<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>
</body>
</html>

Output:

HTML usemap attribute

Example: for <object> element

<!DOCTYPE html>
<html>
<body>
<object data="planets.gif" 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>
</body>
</html>

Output:

HTML usemap attribute

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