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 −

ValueDescription
altTo set or return alt attribute value.
coordsTo set or return the cords attributes of an area.
hashTo set or return the anchor part of the href attribute value.
hostTo set or return both the hostname and port part of the href attribute value.
hostnameTo set or return the hostname part of the href attribute value.
hrefTo set or return the value of the href attribute of an area.
noHrefTo set or return the value of the nohref attribute of an area. Deprecated in HTML5.
originTo return the protocol, hostname and port part of the href attribute value.
passwordTo set or return the password part of the href attribute value.
pathnameTo set or return the pathname part of the href attribute value.
portTo 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 −

After clicking on the CLICK IT button −

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.";
}
raja
Published on 06-Aug-2019 12:55:56
Advertisements