The HTMLMapElement interface has specific attributes and methods for modifying the layout and presentation of map elements, in addition to those of the ordinary object HTMLElement interface that it also has access to through inheritance.

To define an image map, use the <map> tag. A image with clickable areas is called an image map. A connection between the image and the map is established by the usemap attribute of the <img> and the name attribute of the <map> elements, both of which are necessary. The <area> element, which defines the clickable areas in the image map, is contained within the <map> element.

Attribute Value Description Example
name mapname Required. Specifies the name of the image map <img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379"> <map name="workmap"> <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm"> <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm"> <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm"> </map>

Browser Compatibility

Element Chrome Edge Firefox Safari Opera
<map> Yes Yes Yes Yes Yes