Javascript Reference - HTML DOM Map areas Collection

The areas collection returns a list of all <area> elements in an image-map.

Browser Support


`areas`	Yes	Yes	Yes	Yes	Yes

Syntax

var v = mapObject.areas

Properties

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

Methods

Method	Description
[name_or_index]	Get element by index or name
item(name_or_index)	Get the element from the collection by index/name/id
namedItem(name_or_id)	Get the element from the collection by name or id

Example

The following code shows how to get the URL of the first <area> element in an image-map.


<!DOCTYPE html>
<html>
<body>
<!--   w w  w  .j  a  va 2 s. c o m-->
<img src="http://java2s.com/style/demo/border.png" width="145" height="126" alt="myIDs" usemap="#myIDmap">

<map id="myIDmap" name="myIDmap">
  <area shape="rect" coords="0,0,82,130" alt="A" href="a.htm">
  <area shape="circle" coords="90,50,3" alt="B" href="b.htm">
  <area shape="circle" coords="124,58,8" alt="C" href="c.htm">
</map>
<button onclick="myFunction()">test</button>
<p id="demo"></p>
<script>
function myFunction() {
    var x = document.getElementById("myIDmap").areas[0].href;
    document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 2

The following code shows how to get the URL of the first <area> element in an image-map using item().


<!DOCTYPE html>
<html>
<body>
<!--from w ww.j a v a 2s .  c o m-->
<img src="http://java2s.com/style/demo/border.png" width="145" height="126" alt="myIDs" usemap="#myIDmap">
<map id="myIDmap" name="myIDmap">
  <area shape="rect" coords="0,0,82,126" alt="A" href="a.htm">
  <area shape="circle" coords="90,50,3" alt="B" href="b.htm">
  <area shape="circle" coords="124,58,8" alt="C" href="c.htm">
</map>
<button onclick="myFunction()">test</button>
<p id="demo"></p>
<script>
function myFunction() {
    var x = document.getElementById("myIDmap").areas.item(0).href;
    document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 3

The following code shows how to get the URL of the <area> element with id="myArea" in an image-map using namedItem(name_or_id).


<!DOCTYPE html>
<html>
<body>
<img src="http://java2s.com/style/demo/border.png" width="145" height="126" alt="myIDs" usemap="#myIDmap">
<!--  ww  w.  java 2  s. c  om-->
<map id="myIDmap" name="myIDmap">
  <area shape="rect" coords="0,0,82,126" alt="A" href="a.htm">
  <area id="myArea" shape="circle" coords="90,50,3" alt="B" href="b.htm">
  <area shape="circle" coords="124,58,8" alt="C" href="c.htm">
</map>
<button onclick="myFunction()">test</button>
<p id="demo"></p>
<script>
function myFunction() {
    var x = document.getElementById("myIDmap").areas.namedItem("myArea").href;
    document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 4

The following code shows how to get the shape of all <area> elements in an image-map.


<!DOCTYPE html>
<html>
<body>
<!--  w  ww  .  j  av a2s .  co  m-->
<img src="http://java2s.com/style/demo/border.png" width="145" height="126" alt="myIDs" usemap="#myIDmap">

<map id="myIDmap" name="myIDmap">
  <area shape="rect" coords="0,0,82,126" alt="A" href="a.htm">
  <area shape="circle" coords="90,58,3" alt="B" href="b.htm">
  <area shape="circle" coords="124,58,8" alt="C" href="c.htm">
</map>
<button onclick="myFunction()">test</button>
<script>
function myFunction() {
    var x = document.getElementById("myIDmap");
    var i;
    for (i = 0; i < x.areas.length; i++) {
        console.log(x.areas[i].shape);
    }
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 5

The following code shows how to get the number of <area> elements in an image-map.


<!DOCTYPE html>
<html>
<body>
<!--from  w w w  .j ava2 s. c  o  m-->
<img src="http://java2s.com/style/demo/border.png" width="145" height="126" 
   alt="myIDs" usemap="#myIDmap">

<map id="myIDmap" name="myIDmap">
  <area shape="rect" coords="0,0,82,126" alt="A" href="a.htm">
  <area shape="circle" coords="90,60,3" alt="B" href="b.htm">
  <area shape="circle" coords="120,58,8" alt="C" href="c.htm">
</map>
<button onclick="myFunction()">test</button>
<p id="demo"></p>
<script>
function myFunction() {
    var x = document.getElementById("myIDmap").areas.length;
    document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

The code above is rendered as follows: