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:
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:
Note: The usemap attribute of the object element is not supported in Chrome, Safari, and Opera.