Widely availableSuitable for production when it improves semantics, input, or browser integration.

Overview

The <area> and <map> elements define a clickable area on an image. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
1
12
1
1
18
1
HTML attribute
alt
1
12
1
1
18
1
coords
1
12
1
1
18
1
href
1
12
1
1
18
1
implicit_noopener

`target="_blank"` implies `rel="noopener"` behavior

88
88
79
12.1
88
12.2

The rel attribute defines the relationship between a linked resource and the current document. Valid on link, a, area, and form, the supported values depend on the element on which the attribute is found.

16
12
30
5
18
4.2
shape
1
12
1
1
18
1
target
1
12
1
1
18
1
ismap
1
12
1
3
18
2
usemap
1
12
1
3
18
2
name
1
12
1
1
18
1
DOM API

The HTMLAreaElement interface provides special properties and methods (beyond those of the regular object HTMLElement interface it also has available to it by inheritance) for manipulating the layout and presentation of area elements.

1
12
1
1
18
1

The alt property of the HTMLAreaElement interface specifies the text of the hyperlink, defining the textual label for an image map's link. It reflects the area element's alt attribute.

1
12
1
1
18
1

The coords property of the HTMLAreaElement interface specifies the coordinates of the element's shape as a list of floating-point numbers. It reflects the area element's coords attribute.

1
12
1
1
18
1

The hash property of the HTMLAreaElement interface is a string containing a "#" followed by the fragment identifier of the element's href. If the URL does not have a fragment identifier, this property contains an empty string, "".

1
12
1
1
18
1

The host property of the HTMLAreaElement interface is a string containing the host, which is the HTMLAreaElement.hostname, and then, if the port of the URL is nonempty, a ":", followed by the HTMLAreaElement.port of the URL. If the URL does not have a hostname, this property contains an empty string, "".

1
12
1
1
18
1

The hostname property of the HTMLAreaElement interface is a string containing either the domain name or IP address of the element's URL. If the URL does not have a hostname, this property contains an empty string, "". IPv4 and IPv6 addresses are normalized, such as stripping leading zeros, and domain names are converted to IDN.

1
12
1
1
18
1

The HTMLAreaElement.href property is a stringifier that returns a string containing the whole URL, and allows the href to be updated.

1
12
1
1
18
1

The origin read-only property of the HTMLAreaElement interface returns a string containing the Unicode serialization of the origin of the element's href.

32
17
26
10
32
10

The password property of the HTMLAreaElement interface is a string containing the password component of the element's href. If the URL does not have a password, this property contains an empty string, "".

32
79
26
10
32
10

The HTMLAreaElement.pathname property is a string containing an initial '/' followed by the path of the URL not including the query string or fragment (or the empty string if there is no path).

1
12
1
1
18
1

The port property of the HTMLAreaElement interface is a string containing the port number of the element's href. If the port is the default for the protocol (80 for ws: and http:, 443 for wss: and https:, and 21 for ftp:), this property contains an empty string, "".

1
12
1
1
18
1

The protocol property of the HTMLAreaElement interface is a string containing the protocol or scheme of the element's href, including the final ":".

1
12
1
1
18
1

The HTMLAreaElement.rel property reflects the rel attribute. It is a string containing a space-separated list of link types indicating the relationship between the resource represented by the area element and the current document.

54
12
30
9
54
9

The read-only relList property of the HTMLAreaElement returns a live DOMTokenList object containing the set of link types indicating the relationship between the resource represented by the area element and the current document. It reflects the area element's rel content attribute.

65
18
30
9
65
9

The search property of the HTMLAreaElement interface is a search string, also called a query string, that is a string containing a "?" followed by the parameters of the element's href. If the URL does not have a search query, this property contains an empty string, "".

1
12
1
1
18
1

The shape property of the HTMLAreaElement interface specifies the shape of an image map area. It reflects the area element's shape attribute.

1
12
1
1
18
1

The target property of the HTMLAreaElement interface is a string that indicates where to display the linked resource.

1
12
1
1
18
1

The HTMLAreaElement.toString() stringifier method returns a string containing the whole URL. It is a read-only version of HTMLAreaElement.href.

32
12
22
10.1
32
10.3

The username property of the HTMLAreaElement interface is a string containing the username component of the element's href. If the URL does not have a username, this property contains an empty string, "".

32
79
26
10
32
10

The isMap property of the HTMLImageElement interface indicates that the image is part of a server-side map. If so, the coordinates where the user clicked on the image are sent to the server. It reflects the element's ismap content attribute. This attribute is allowed only if the element is a descendant of an a element with a valid href attribute.

1
12
1
3
18
1

The useMap property of the HTMLImageElement interface providing the name of the client-side image map to apply to the image. It reflects the element's usemap content attribute.

1
12
1
3
18
1

The HTMLMapElement interface provides special properties and methods (beyond those of the regular object HTMLElement interface it also has available to it by inheritance) for manipulating the layout and presentation of map elements.

1
12
1
3
18
1

The areas read-only property of the HTMLMapElement interface returns a collection of area elements associated with the map element.

1
12
1
3
18
1

The name property of the HTMLMapElement represents the unique name element. Its value can be used with the useMap attribute of the img element to reference a element.

1
12
1
3
18
1
Other

The noopener keyword for the rel attribute of the a, area, and form elements instructs the browser to navigate to the target resource without granting the new browsing context access to the document that opened it — by not setting the Window.opener property on the opened window (it returns null).

49
79
52
10.1
49
10.3

The noreferrer keyword for the rel attribute of the a, area, and form elements instructs the browser, when navigating to the target resource, to omit the Referer header and otherwise leak no referrer information — and additionally to behave as if the noopener keyword were also specified.

16
13
33
5
18
4.2

The HTML element is used with area elements to define an image map (a clickable link area).

1
12
1
1
18
1
1+Supported (version) Not supported Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Implementation note
  • From Firefox 29 to Firefox 40, the returned value was incorrectly percent-decoded.
Notes 1 item(s)
Implementation note
  • Before Firefox 49, results for URL using the `blob` scheme incorrectly returned `null`.
Notes 1 item(s)
Implementation note
  • Before Firefox 53, the `pathname` and `search` `HTMLHyperlinkElementUtils` properties returned the wrong parts of the URL. For example, for a URL of `https://z.com/x?a=true&b=false`, `pathname` would return `'/x?a=true&b=false'` and `search` would return '', rather than `'/x'` and `'?a=true&b=false'` respectively. This has now been fixed.
Notes 1 item(s)
Implementation note
  • Before Firefox 53, the `pathname` and `search` `HTMLHyperlinkElementUtils` properties returned the wrong parts of the URL. For example, for a URL of `https://z.com/x?a=true&b=false`, `pathname` would return `'/x?a=true&b=false'` and `search` would return '', rather than `'/x'` and `'?a=true&b=false'` respectively. This has now been fixed.
Notes 1 item(s)
Implementation note
  • Before Firefox 63, `rel="noopener"` created windows with all features disabled by default. Starting with Firefox 63, these windows have the same features enabled by default as any other window.
Notes 2 item(s)
Implementation note
  • Before Firefox 5, in Quirks Mode, empty maps were no longer skipped over in favor of non-empty ones when matching.
  • Before Firefox 17, the default styling of the `<map>` HTML element was `display: block;`. This is now `display: inline;` and matches the behavior of the other browsers. It was already the case in Quirks Mode.

Syntax

HTML
<img src="map.png" usemap="#mymap" alt="フロアマップ">
<map name="mymap">
  <area shape="rect" coords="0,0,100,100" href="/room1" alt="会議室1">
  <area shape="circle" coords="200,150,50" href="/room2" alt="会議室2">
</map>

Live demo

Dashboard hotspots

Use clickable areas over one image to point at multiple destinations.

PreviewFullscreen

Product annotations

Use areas to label distinct parts of a single product image.

PreviewFullscreen

Map legend table

Combine a visual map with a text legend so the clickable regions remain understandable.

PreviewFullscreen

Use cases

  • Strengthen structure

    Use Image maps to make the document outline, grouping, or semantics more explicit.

  • Improve meaning

    Apply Image maps when clearer HTML structure helps users and tools understand the content.

Cautions

  • Test Image maps in your target browsers and input environments before depending on it as a primary behavior.

Accessibility

  • Prefer semantic structure that improves navigation and interpretation for assistive technologies, not just visual organization.

Powered by web-features