ExampleAn image-map, with clickable areas: <img src="colors.png" width="600" height="400" alt="Colors" usemap="#colormap" /> <map name="colormap"> <area shape="rect" coords="0,0,82,126" href="red.html" alt="Red" /> <area shape="circle" coords="90,58,3" href="blue.html" alt="Blue" /> <area shape="circle" coords="124,58,8" href="green.html" alt="Green" /> </map> | Browser Support |
1. Definition and Usage
The <map> tag is used to define a client-side image-map. An image-map is an image with clickable areas.
The name attribute of the <map> element is required and it is associated with the <img>'s usemap attribute and creates a relationship between the image and the map.
The <map> element contains a number of <area> elements, that defines the clickable areas in the image map.
2. Differences Between HTML and XHTML
In XHTML, the name attribute of the <map> tag is deprecated, and will be removed. Use the id attribute instead.
3. Required Attributes
DTD indicates in which HTML 4.01/XHTML 1.0 DTD the attribute is allowed. S=Strict, T=Transitional, and F=Frameset.
| Attribute | Value | Description | DTD |
|---|---|---|---|
| name | mapname | Specifies the name for an image-map | STF |
4. Standard Attributes
The <map> tag supports the following standard attributes:
| Attribute | Value | Description | DTD |
|---|---|---|---|
| class | classname | Specifies a classname for an element | STF |
| dir | rtl ltr | Specifies the text direction for the content in an element | STF |
| id | id | Specifies a unique id for an element | STF |
| lang | language_code | Specifies a language code for the content in an element | STF |
| style | style_definition | Specifies an inline style for an element | STF |
| title | text | Specifies extra information about an element | STF |
| xml:lang | language_code | Specifies a language code for the content in an element, in XHTML documents | STF |
Event Attributes
The <map> tag supports the following event attributes:
| Attribute | Value | Description | DTD |
|---|---|---|---|
| onclick | script | Script to be run on a mouse click | STF |
| ondblclick | script | Script to be run on a mouse double-click | STF |
| onmousedown | script | Script to be run when mouse button is pressed | STF |
| onmousemove | script | Script to be run when mouse pointer moves | STF |
| onmouseout | script | Script to be run when mouse pointer moves out of an element | STF |
| onmouseover | script | Script to be run when mouse pointer moves over an element | STF |
| onmouseup | script | Script to be run when mouse button is released | STF |
| onkeydown | script | Script to be run when a key is pressed | STF |
| onkeypress | script | Script to be run when a key is pressed and released | STF |
| onkeyup | script | Script to be run when a key is released | STF |
