Open In App

HTML | DOM Area Object

Improve
Improve
Like Article
Like
Save
Share
Report

The Area Object property in HTML DOM is used to create and access the <area> element with in the object. For example, making the area of image clickable and access other data through that which can be used further in map or other object. 

Syntax:

  • It is used to access a <area> element.
var x = document.getElementById("myArea");
  • It is used to create a <area> element.
var x = document.createElement("AREA");

Property Values:

Value Description
alt It is used to set or return the value of the alt attribute of an area.
coords It is used to set or return the value of the coords attribute of an area.
hash It is used to set or return the anchor part of the href attribute value.
host It is used to set or return the hostname and port part of the href attribute value.
hostname It is used to set or return the hostname part of the href attribute value.
href It is used to set or return the value of the href attribute of an area.
noHref It is used to set or return the value of the nohref attribute of an area.
origin It is used to returns the protocol, hostname and port part of the href attribute value.
password It is used to set or return the password part of the href attribute value.
pathname It is used to set or return the pathname part of the href attribute value.
port It is used to set or return the port part of the href attribute value.
protocol It is used to set or return the protocol part of the href attribute value.
search It is used to set or return the querystring part of the href attribute value.
shape It is used to set or return the value of the shape attribute of an area.
target It is used to set or return the value of the target attribute of an area.
username It is used to set or return the username part of the href attribute value.

Example-1: Return href attribute of clickable image. 

html




<!DOCTYPE html>
<html>
<title>
    HTML DOM Area Object
</title>
 
<body>
    <h4>Click the button</h4>
    <button onclick="GFG()">Click Here!
        <br>
    </button>
    <map name="Geeks1">
        <area id="Geeks"
              shape="rect"
              coords="0, 0, 110, 100"
              alt="Geeks"
              href=
    </map>
 
    <img src=
         width="300"
         height="100"
         alt="Geeksforgeeks"
         usemap="#Geeks1">
   
    <p id="GEEK!"></p>
   
    <script>
        function GFG() {
           
            //  Return href attribute.
            var x =
            document.getElementById("Geeks").href;
           
            document.getElementById(
            "GEEK!").innerHTML = x;
        }
    </script>
</body>
 
</html>


Output:

  

Example-2: Creating area element and set href attribute. 

html




<!DOCTYPE html>
<html>
<title>
    HTML DOM Area Object
</title>
 
<body>
    <h4>Click the button</h4>
    <button onclick="GFG()">Click Here!
        <br>
    </button>
    <p></p>
    <img src=
         width="300"
         height="100"
         usemap="#planetmap">
   
    <map id="myMap" name="planetmap">
    </map>
   
    <p id="GEEK!"></p>
 
    <script>
        function GFG() {
           
            // creating area element using
            // document.createElement("AREA");
            var y = document.createElement("AREA");
            y.setAttribute("href",
            y.setAttribute("shape", "rect");
            y.setAttribute("coords", "190, 0, 300, 100");
            document.getElementById("myMap").appendChild(y);
 
            document.getElementById("GEEK!").innerHTML =
                "Click on the GEEKS area in the image.";
        }
    </script>
</body>
 
</html>


Output:

  

Steps to execute the above code:

  • Save the file
  • Execute on an standard browser.

Supported Browsers: The browser supported by DOM Area Object property are listed below:

  • Google Chrome 5.0
  • Internet Explorer 8.0
  • Firefox 3.6
  • Safari 5.0
  • Opera 10.6


Last Updated : 30 Jun, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads