HTML usemap Attribute


The usemap attribute in HTML is utilized to associate an image with an image map, effectively turning areas within the image into clickable links. An image map allows you to define multiple areas within a single image, each linked to different destinations. This is particularly useful for creating interactive images where different parts perform different actions when clicked, such as navigating to various web pages or displaying different content.

The usemap attribute is added to an <img> tag to specify which map it is associated with. The value of the usemap attribute must match the name of a <map> element defined elsewhere in the HTML document. The <map> element contains one or more <area> elements that define the shape, coordinates, and the URL that each clickable area links to.

For example, to create an image map, you would:

  1. Include an <img> tag with the usemap attribute, where the attribute's value corresponds to the name of the map (prefixed with a #).
  2. Define a <map> element with a name attribute that matches the value specified in the usemap attribute.
  3. Within the <map> element, add <area> elements to define the shapes (e.g., rect for rectangle, circle for circle, poly for polygon) and coordinates of the clickable areas, along with the href attribute to specify the destination URLs.


<tagname usemap="#mapname">


  • #mapnameA hash character (#) followed by the name of the map to be used.

Applies To

The usemap attribute can be used on the following html elements.


<img alt="Shapes" height="102" src="images/shapes.jpg" style="border: none;" usemap="#shapes" width="375" />

<map name="shapes" id="shapes">
<area shape="circle" coords="58,50,40" href="javascript:clicked_on('circle');" title="Circle" alt="Circle"/>
<area shape="rect" coords="136,11,227,89" href="javascript:clicked_on ('rectangle');" title="Rectangle" alt="Rectangle"/>
<area shape="poly" coords="309,13,358,89,257,89" href="javascript:clicked_on('triangle');" title="Triangle" alt="Triangle"/>
<area shape="default" nohref="nohref" title="Default" alt="Default"/>
function clicked_on ( clicked_shape )
alert ( "You clicked on the " + clicked_shape );

Browser Support

The following table will show you the current browser support for the HTML usemap Attribute.

Edge Chrome Firefox Opera Safari
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview

Last updated by CSSPortal on: 29th March 2024