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.
Syntax
htmlImageElement.useMap = imageMapAnchor; let imageMapAnchor = htmlImageElement.useMap;
Value
A USVString
providing the page-local URL (that is, a URL that begins with the hash or pound symbol, "#
") 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.
Usage notes
The string value of useMap
must be a valid anchor for a <map>
element. In other words, this string should be the value of the appropriate <map>
's name
attribute with a pound or hash symbol prepended to it.
Consider a <map>
that looks like this:
<map name="mainmenu-map"> <area shape="circle" coords="25, 25, 75, 75" href="/index.html" alt="Return to home page"> <area shape="rect" coords="25, 25, 100, 150" href="/index.html" alt="Shop"> </map>
Given the image map named mainmenu-map
, the image which uses it should look something like the following:
<img src="menubox.png" 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.
Example
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.
Specifications
Specification | Status | Comment |
---|---|---|
HTML Living Standard The definition of 'HTMLImageElement.useMap' in that specification. |
Living Standard |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
useMap | Chrome Full support 1 | Edge Full support 12 | Firefox Full support Yes | IE ? | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
Legend
- Full support
- Full support
- Compatibility unknown
- Compatibility unknown