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. |
Implicit ARIA role | No corresponding role |
Permitted ARIA roles | No role permitted
|
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 thename
attribute must not be a compatibility-caseless match for the value of thename
attribute of another<map>
element in the same document. If theid
attribute is also specified, both attributes must have the same value.
Examples
<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">
Result
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:
[[File:../../../../../../media.prod.mdn.mozit.cloud/attachments/2017/02/02/14595/e088d8deeee4ecc34b579febaa73b7b2/Screen%20Shot%202017-02-02%20at%2010.48.40%20PM.png]]
For the right.html
link
[[File:../../../../../../media.prod.mdn.mozit.cloud/attachments/2017/02/02/14597/6db4dddcc96cf5a641ef7692b4b14510/Screen%20Shot%202017-02-02%20at%2010.49.04%20PM.png]]
Specifications
Specification | Status | Comment |
---|---|---|
HTML Living StandardThe definition of '<map>' in that specification. | Living Standard | |
HTML5The definition of '<map>' in that specification. | Recommendation | |
HTML 4.01 SpecificationThe 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 12 |
Firefox Full support 1 Full support 1 Notes' Before Firefox 5, in Quirks Mode, empty maps were no longer skipped over in favor of non-empty ones when matching.
Notes' Before Firefox 17, the default styling of the |
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 12 |
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.
See also
<map> by Mozilla Contributors is licensed under CC-BY-SA 2.5.