HTML <area> (Image Map Area) Tag
Example
<img src="desk.jpg" usemap="#image-map">
<map name="image-map">
<area target="_blank" alt="Computer" title="Computer" href="computer.png" coords="112,31,285,246" shape="rect">
<area target="_blank" alt="Cup" title="Cup" href="cup.png" coords="327,212,31" shape="circle">
<area target="_blank" alt="Mobile" title="Mobile" href="mobile.png" coords="296,121,326,176" shape="rect">
<area target="_blank" alt="Book" title="Book" href="book.png" coords="53,132,115,157,72,237,2,211" shape="poly">
</map>Meaning
The <area> element defines a hotspot region on an image and associates it with a hypertext link.
This element is used only within a <map> tag.
Notes:
- HTML 3.2 defines only alt, coords, href, nohref, and shape.
- HTML5 does not define rev attribute for <area> tags.
Version: HTML 2, 3.2, 4, 4.01, 5
Standard Syntax
<img src="URL" alt="txt" usemap="#idName" width="px" height="px">
<map name="idName">
<area shape="circle | default | poly | rect"" coords="coordinates" alt="txt" href="URL">
</map>Browser Support
Status
Attributes
| Attribute | Value | Description |
|---|---|---|
| alt | text | Alternative text for unloaded image. |
| coords | coordinates | coords attribute contains a set of values specifying the coordinates of the hotspot region. |
| download | fileName | Download the link instead of navigating it. |
| href | URL | Hyperlink of the page used to navigate |
| hreflang | languageCode | Language of the hyperlinked page or document. |
| ping | URL | Specifies a list of URLs to be notified if the user follows the hyperlink. |
| media | mediaQuery | Specification suggests the value should be used to indicate whether a destination is appropriate for screen, print, PDA, and so on |
| referrepolicy | no-referrer no-referrer-when-downgrade origin origin-when-cross-origin same-origin strict-origin-when-cross-origin unsafe-url |
This specifies which referrer information to send with the hyperlink. |
| rel | alternate author bookmark external help license next nofollow noreferrer noopener prev search tag |
This attribute specifies the relationship of the target object to the link object. |
| shape | default rect circle poly |
shape attribute defines the shape of the associated hot spot. |
| target | _blank _parent _self _top |
This attribute specifies the target window for a hypertext source link that references frames. |
| type | mediaType | This attribute specifies the media type in the form of a MIME type for the link target. |
Attributes
| Attribute | Value | Description |
|---|---|---|
| name | uniqueName | Specifies a name for the clickable area so that it can be scripted by older browsers. |
| nohref | - | Defines that no hyperlink exists for the associated area. |
| type | mediaType | This attribute specifies the media type in the form of a MIME type for the link target. |
Global Attributes
<area> element also supports the Global Attributes in HTML.
Event Attributes
<area> element also supports the Event Attributes in HTML.
By Default CSS Value(s)
Most of the browsers will display the <area> element with the following by default value(s)
area {
display: none;
}