HTML usemap Attribute

Description

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:

Include an <img> tag with the usemap attribute, where the attribute's value corresponds to the name of the map (prefixed with a #).
Define a <map> element with a name attribute that matches the value specified in the usemap attribute.
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.

Syntax

<tagname usemap="#mapname">

Values

#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.

Example

HTML

<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"/>

</map>

<script>

function clicked_on ( clicked_shape )

{

	alert ( "You clicked on the " + clicked_shape );

}

</script>