X
HOME HTML CSS JAVASCRIPT SQL PHP JQUERY XML ASP.NET MORE...
REFERENCES | EXAMPLES | FORUM | ABOUT

Map areas Collection

Map Object Reference Map Object

Example

Get the number of <area> elements in an image-map:

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

The result of x will be:

3

Try it yourself »


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

Internet Explorer Firefox Opera Google Chrome Safari

The areas collection is supported in all major browsers.


Syntax

mapObject.areas

Properties

Property Description
length Returns the number of <area> elements in the collection

Methods

Method Description
[name_or_index] A string or integer that specifies the element to retrieve (index starts at 0)
item(name_or_index) Returns the element from the collection with the specified index/name/id
namedItem(name_or_id) Returns the element from the collection with the specified name (name or id attribute)


More Examples

Example

[name_or_index]

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

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

Try it yourself »

Example

item(name_or_index)

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

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

Try it yourself »

Example

namedItem(name_or_id)

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

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

Try it yourself »

Example

Get the shape of all <area> elements in an image-map:

var x = document.getElementById("planetmap");
var txt = "";
for (var i = 0; i < x.areas.length; i++)
  {
  txt = txt + x.areas[i].shape + "<br>";
  }
document.getElementById("demo").innerHTML = txt;

Try it yourself »


Map Object Reference Map Object

Your suggestion:

Close [X]

Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

WEB BUILDING

Download XML Editor FREE Website BUILDER Free HTML5 Templates

SHARE THIS PAGE

facebook