Javascript DOM HTML Area Object create

Introduction

The Area object represents an HTML <area> element.

Create an Area Object

We can create an <area> element by using the document.createElement() method:

Example 

var x = document.createElement("AREA");

View in separate window 

<!DOCTYPE html>
<html>
<body>

<img src="planets.gif" width="100" height="100" usemap="#myFlagMap">

<map id="myMap" name="myFlagMap">
</map>//w  w w.ja v  a 2 s . com

<p>Click the button to create an AREA element with a link to "venus.htm".</p>

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

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

<script>
function myFunction() {
  var x = document.createElement("AREA");
  x.setAttribute("href", "venus.htm");
  x.setAttribute("shape", "circle");
  x.setAttribute("coords", "50,50,40");
  document.getElementById("myMap").appendChild(x);

  document.getElementById("demo").innerHTML = "The AREA element was created, and you can now click on the venus area in the image.";
}
</script>

</body>
</html>



PreviousNext

Related