Map areas collection

HTML DOM Map Object

Definition and usage

area collection returns all <area> element collection

Note:The elements in the set are sorted in the order they appear in the source code.

Tip:If you need to return all areas with specified href attributes <area> element please use links collection.

Instance

Example 1

Find out how many <area> elements are in the specified image map:

var x = document.getElementById("planetmap").areas.length;

Try It Yourself

The result of x is:

3

More TIY examples are below the page.

Syntax

mapObject.areas

Property

Value Description
length

Returns the number of <area> elements in the collection.

Note:This property is read-only

Method

Method Description
[index]

Returns the <area> element at the specified index in the collection (starting from 0).

Note:Returns null if the index number is out of range.
item(index)

Returns the <area> element at the specified index in the collection (starting from 0).

Note:Returns null if the index number is out of range.
namedItem(id)

Returns the <area> element with the specified id in the collection.

Note:Returns null if the id does not exist.

Technical Details

DOM Version: Core Level 2 Document Object
Return Value:

HTMLCollection object, representing all <area> elements in the document's image map.

The elements in the set are sorted in the order they appear in the source code.

Browser Support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Supports Supports Supports Supports Supports

More Examples

Example 2: [index]

Get the URL of the first <area> element in the image map:

var x = document.getElementById("planetmap").areas[0].href;

Try It Yourself

The result of x will be:

https://www.codew3c.com/jsref/sun.html

Example 3: item(index)

Get the URL of the first <area> element in the image map:

var x = document.getElementById("planetmap").areas.item(0).href;

Try It Yourself

The result of x will be:

https://www.codew3c.com/jsref/sun.html

Example 4: namedItem(id)

Get the URL of the <area> element with id="myArea" in the image map:

var x = document.getElementById("planetmap").areas.namedItem("myArea").href;

Try It Yourself

The result of x will be:

https://www.codew3c.com/jsref/mercur.html

Example 5

Traverse all <area> elements in the 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>";
}

Try It Yourself

The result of x will be:

rect
circle
circle

HTML DOM Map Object