Map areas Collection
Example
Find out how many <area> elements there are in a specific image-map:
var x = document.getElementById("planetmap").areas.length;
The result of x will be:
3
Try it Yourself »
More "Try it Yourself" examples below.
Definition and Usage
The areas collection returns a collection of all <area> elements in an image-map.
Note: The elements in the collection are sorted as they appear in the source code.
Tip: To return a collection of all <area> elements that have a href attribute specified, use the links collection.
Browser Support
| Collection | |||||
|---|---|---|---|---|---|
| areas | Yes | Yes | Yes | Yes | Yes |
Syntax
mapObject.areas
Properties
| Property | Description |
|---|---|
| length | Returns the number of <area> elements in the collection. Note: This property is read-only |
Methods
| Method | Description |
|---|---|
| [index] | Returns the <area> element from the collection with the specified index (starts at 0). Note: Returns null if the index number is out of range |
| item(index) | Returns the <area> element from the collection with the specified index (starts at 0). Note: Returns null if the index number is out of range |
| namedItem(id) | Returns the <area> element from the collection with the specified id. Note: Returns null if the id does not exist |
Technical Details
| DOM Version: | Core Level 2 Document Object |
|---|---|
| Return Value: | An HTMLCollection Object, representing all <area> elements in an image-map in the document. The elements in the collection are sorted as they appear in the source code |
More Examples
Example
[index]
Get the URL of the first <area> element in an image-map:
var x = document.getElementById("planetmap").areas[0].href;
The result of x will be:
https://www.w3schools.com/jsref/sun.htm
Try it Yourself »
Example
item(index)
Get the URL of the first <area> element in an image-map:
var x = document.getElementById("planetmap").areas.item(0).href;
The result of x will be:
https://www.w3schools.com/jsref/sun.htm
Try it Yourself »
Example
namedItem(id)
Get the URL of the <area> element with id="myArea" in an image-map:
var x = document.getElementById("planetmap").areas.namedItem("myArea").href;
The result of x will be:
https://www.w3schools.com/jsref/mercur.htm
Try it Yourself »
Example
Loop through all <area> elements in an image-map and output the shape of each area:
var x = document.getElementById("planetmap");
var txt = "";
var i;
for (i = 0; i < x.areas.length; i++) {
txt = txt + x.areas[i].shape + "<br>";
}
The result of txt will be:
rect
circle
circle
Try it Yourself »
❮ Map Object
