Skip to content
Related Articles

Related Articles

HTML | DOM Area alt Property

Improve Article
Save Article
  • Last Updated : 04 Jul, 2022
Improve Article
Save Article

The Area alt Property in HTML DOM is used to set or return the value of the alt attribute. It is used to specify the alternate name for the area if the image is not visible. 

Syntax:

  • It return the Area alt property.
 areaObject.alt
  • It is used to set the Area alt property.
areaObject.alt = text

Property Values: It contains single value which specify the alternate text for the area. 

Return Value: It returns a string value which represents the alternate text for the area. 

Example 1: This example returns the Area alt Property. 

html




<!DOCTYPE html>
<html>
<title>
    HTML DOM Area alt Property
</title>
 
<body>
    <h4> HTML DOM Area alt Property </h4>
    <button onclick="GFG()">Click Here!
    </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">
    </br>
    <p id="GEEK!"></p>
     
    <script>
        function GFG() {
             
        // Return alt property
            var x = document.getElementById("Geeks").alt;
        document.getElementById("GEEK!").innerHTML = x;
        }
    </script>
</body>
 
</html>                   

Output: 

Before Clicking on Button:

  

After Clicking on Button:

  

Example 2: This example sets the Area alt property. 

html




<!DOCTYPE html>
<html>
<title>
    HTML DOM Area alt Property
</title>
 
<body>
    <h4> HTML DOM Area alt Property </h4>
    <button onclick="GFG()">Click Here!
    </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">
    </br>
    <p id="GEEK!"></p>
     
    <script>
        function GFG() {
             
        // Sets alt property.
            var x = document.getElementById("Geeks").alt = "abcxyz";
        document.getElementById("GEEK!").innerHTML =
                "The alt value has been changed to " + x;
        }
    </script>
</body>
 
</html>                    

Output: 

Before Clicking on Button:

  

After Clicking on Button:

  

Supported Browsers:

  • Google Chrome
  • Firefox
  • Internet Explorer
  • Opera
  • Safari

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!