The HTML <map>
element is used with <area>
elements to define an image map (a clickable link area).
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Content categories | Flow content, phrasing content, palpable content. |
---|---|
Permitted content | Any transparent element. |
Tag omission | None, both the starting and ending tag are mandatory. |
Permitted parents | Any element that accepts phrasing content. |
Permitted ARIA roles | None |
DOM interface | HTMLMapElement |
Attributes
This element includes the global attributes.
name
- The name attribute gives the map a name so that it can be referenced. The attribute must be present and must have a non-empty value with no space characters. The value of the name attribute must not be a compatibility-caseless match for the value of the name attribute of another map element in the same document. If the id attribute is also specified, both attributes must have the same value.
Example
<map name="primary"> <area shape="circle" coords="75,75,75" href="left.html"> <area shape="circle" coords="275,75,75" href="right.html"> </map> <img usemap="#primary" src="https://placehold.it/350x150" alt="350 x 150 pic">
Live Example
Expected live example output
The live example above should appear similar to the following images (when using your keyboard tab key):
For the left.html
link:
For the right.html
link
Specifications
Specification | Status | Comment |
---|---|---|
HTML Living Standard The definition of '<map>' in that specification. |
Living Standard | |
HTML5 The definition of '<map>' in that specification. |
Recommendation | |
HTML 4.01 Specification The definition of '<map>' in that specification. |
Recommendation | Initial definition |
Browser compatibility
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
map | Chrome Full support 1 | Edge Full support Yes | Firefox
Full support
1
| IE Full support Yes | Opera Full support Yes | Safari Full support 1 | WebView Android Full support 1 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support 1.0 |
name | Chrome Full support 1 | Edge Full support Yes | Firefox Full support 1 | IE Full support Yes | Opera Full support Yes | Safari Full support 1 | WebView Android Full support 1 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support 1.0 |
Legend
- Full support
- Full support
- See implementation notes.
- See implementation notes.