HTML <map> tag
The <map> tag is used to create an imagemap. An imagemap is an image with a few different clickable regions that when clicked on will link to different places. Within the <map> tag you will find a few instances of the <area> tag. The <area> tag is used to set the coordinates for the different clickable regions as well as where they link to.
Attributes
| Attribute | Description | Possible values |
|---|---|---|
| name | Required. Sets the name of the imagemap. The value you give to this attribute should match the value you give to the usemap attribute of the <img> tag of the image you are using as an imagemap. | mapName |
Standard attributes
class, dir, id, lang, style, title, xml:lang
For more information on standard attributes, check out our HTML standard attributes reference page.
Event attributes
onclick, ondblclick, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onkeydown, onkeypress, onkeyup
For more information on event attributes, check out our HTML event attributes reference page.
Example
The banana, lemon, and grapes are all clickable links.
Tips & notes
To figure out a set of coordinates to use as part of an imagemap use an image manipulation program like Photoshop or GIMP
If you're going to use an imagemap to link to external pages (pages not on your own website) it is better to have them open in a new window so attention is not fully diverted from your website.