Javascript Reference - HTML DOM Map Object

The Map object represents an HTML <map> element.

Map Object Properties

Property	Description
name	Sets or gets the name attribute of an image-map

Standard Properties and Events

The Map object supports the standard properties and events.

Map Object Collections

Collection	Description
areas	Returns a list of all <area> elements in an image-map
images	Returns a list of all <img> and <object> elements associated with the image-map

Example

We can access a <map> element by using getElementById().


<!DOCTYPE html>
<html>
<body>
<img src="http://java2s.com/style/demo/border.png" width="100" 
   height="100" alt="test" usemap="#myMap">
<!--   w  ww . j a  v a 2s. c  o  m-->
<map id="myMap" name="myMap">
  <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="100,60,8" alt="C" href="c.htm">
</map>
<button onclick="myFunction()">test</button>

<p id="demo"></p>

<script>
function myFunction() {
    var x = document.getElementById("myMap").areas.length;
    document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 2

We can create a <map> element by using the document.createElement() method.


<!DOCTYPE html>
<html>
<body>
<!--  w w  w . j av  a 2 s.c o m-->
<img src="http://java2s.com/style/demo/border.png" width="150" height="150" usemap="#myMap">

<button onclick="myFunction()">test</button>

<p id="demo"></p>

<script>
function myFunction() {
    var x = document.createElement("MAP");
    x.setAttribute("id", "myMap");
    x.setAttribute("name", "myMap");
    document.body.appendChild(x);

    var y = document.createElement("AREA");
    y.setAttribute("href", "http://example.com");
    y.setAttribute("shape", "circle");
    y.setAttribute("coords", "130,60,8");
    document.getElementById("myMap").appendChild(y);

    document.getElementById("demo").innerHTML = "test";
}
</script>
</body>
</html>

The code above is rendered as follows: