HTMLImageElement: useMap property
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
The useMap property on the
HTMLImageElement interface reflects the value of the
HTML usemap attribute, which is a string
providing the name of the client-side image map to apply to the image.
Try it
<map name="infographic">
<area
shape="poly"
coords="129,0,260,95,129,138"
href="https://developer.mozilla.org/docs/Web/HTTP"
alt="HTTP" />
<area
shape="poly"
coords="260,96,209,249,130,138"
href="https://developer.mozilla.org/docs/Web/HTML"
alt="HTML" />
<area
shape="poly"
coords="209,249,49,249,130,139"
href="https://developer.mozilla.org/docs/Web/JavaScript"
alt="JavaScript" />
<area
shape="poly"
coords="48,249,0,96,129,138"
href="https://developer.mozilla.org/docs/Web/API"
alt="Web APIs" />
<area
shape="poly"
coords="0,95,128,0,128,137"
href="https://developer.mozilla.org/docs/Web/CSS"
alt="CSS" />
</map>
<img
usemap="#infographic"
src="https://developer.mozilla.org/shared-assets/images/examples/mdn-info.png"
alt="MDN infographic" />
img {
display: block;
margin: 0 auto;
width: 260px;
height: 260px;
}
Value
A string containing the hash # symbol followed by the name of the <map> element
which defines the image map to apply to the image.
You can learn more about client-side image maps in our learning article Add a hitmap on top of an image.
Examples
Using useMap
Consider a <map> that looks like this:
<map name="mainmenu-map">
<area
shape="circle"
coords="25, 25, 75"
href="https://developer.mozilla.org/index.html"
alt="Return to home page" />
<area shape="rect" coords="25, 25, 100, 150" href="https://developer.mozilla.org/index.html" alt="Shop" />
</map>
Given the image map named mainmenu-map, you can dynamically construct images that reference the image map as follows:
const image = new Image();
image.src = "menubox.png";
image.alt = "";
image.useMap = "#mainmenu-map";
For additional examples (including interactive ones), see the articles about the
<map> and <area> elements, as well as the guide to using image maps.
Specifications
| Specification |
|---|
| HTML # dom-img-usemap |
Browser compatibility
Loading…