<map>: The Image Map element
Try it
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 equal to 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
Image map with two areas
Click the left-hand parrot for JavaScript, or the right-hand parrot for CSS.
HTML
<!-- Photo by Juliana e Mariana Amorim on Unsplash -->
<map name="primary">
<area shape="circle" coords="75,75,75"
href="https://developer.mozilla.org/docs/Web/JavaScript"
target="_blank" >
<area shape="circle" coords="275,75,75"
href="https://developer.mozilla.org/docs/Web/CSS"
target="_blank" >
</map>
<img usemap="#primary" src="parrots.jpg" alt="350 x 150 pic">
Result
Specifications
Specification |
---|
HTML Standard # the-map-element |
Browser compatibility
BCD tables only load in the browser