HTML DOM Area Object

The HTML DOM Area Object is associated with the image map in HTML. Area basically represents the clickable area inside the image map.

The image object helps us in creating and accessing the <area> element within the object. We can change clickable region inside the map or change the shape etc. of the image map based on the user input. It can also be used to manipulate the link inside the area element

Properties

Following are the properties for Area Object −

Value	Description
alt	To set or return alt attribute value.
coords	To set or return the cords attributes of an area.
hash	To set or return the anchor part of the href attribute value.
host	To set or return both the hostname and port part of the href attribute value.
hostname	To set or return the hostname part of the href attribute value.
href	To set or return the value of the href attribute of an area.
noHref	To set or return the value of the nohref attribute of an area. Deprecated in HTML5.
origin	To return the protocol, hostname and port part of the href attribute value.
password	To set or return the password part of the href attribute value.
pathname	To set or return the pathname part of the href attribute value.
port	To set or return the port part of the href attribute value.

Example

Let us see an example of area object −

<!DOCTYPE html>
<html>
<body>
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fb/New7Wonders.jpg/276pxNew7Wonders.jpg" width="400" height="400" usemap="#7Wonders">
<map id="WonderWorld" name="7Wonders">
</map>
<p>Click the button to create an AREA element with a link to "Maya City", which is one of the New Seven Wonders of the World.</p>
<button onclick="myWonder()">CLICK IT</button>
<p id="SAMPLE"></p>
<script>
   function myWonder() {
      var x = document.createElement("AREA");
      x.setAttribute("href", "https://en.wikipedia.org/wiki/Maya_city");
      x.setAttribute("shape", "circle");
      x.setAttribute("coords", "124,58,16");
      document.getElementById("WonderWorld").appendChild(x);
      document.getElementById("SAMPLE").innerHTML = "The AREA element was created, and
      you can now click on Maya City.";
   }
</script>
</body>
</html>

Output

This will produce the following output −

HTML DOM Area Object

After clicking on the CLICK IT button −

HTML DOM Area Object

Now when you click on “Maya city”, it will take you to their Wikipedia page.

In the above example −

We have included an image using tag and specified its width, height and id.

<img data-fr-src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fb/New7Wonders.jpg/276pxNew7Wonders.jpg" width="400" height="300" usemap="#7Wonders">

Then we have created an empty map where we will add an image, area and other things later −

<map id="WonderWorld" name="7Wonders"></map>

We have then created a button named CLICK IT which will execute the myWonder() function.

<button onclick="myWonder()">CLICK IT</button>

The myWonder() function first creates an element and assigns it to variable x. Set various attributes to it like href, shape and cords. At last we append the element associated with variable x to the image map as the child node and also display the area element created and now you can click on “Maya city” inside the paragraph with id “Sample” using innerHTML −

function myWonder() {
   var x = document.createElement("AREA");
   x.setAttribute("href", "https://en.wikipedia.org/wiki/Maya_city ");
   x.setAttribute("shape", "circle");
   x.setAttribute("coords", "124,58,16");
   document.getElementById("WonderWorld").appendChild(x);
   document.getElementById("SAMPLE").innerHTML = "The AREA element was created, and
   you can now click on Maya City.";
}