Related Articles

Related Articles

HTML | DOM Area Object
  • Last Updated : 20 Feb, 2019

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<title>
    HTML DOM Area Object Property
</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>

chevron_right


Output:



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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<title>
    HTML DOM Area Object Property
</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>

chevron_right


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

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :