Skip to content
Related Articles

Related Articles

HTML | DOM Area alt Property
  • Last Updated : 28 May, 2019

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.






<!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
        https://manaschhabra:manaschhabra499@www.geeksforgeeks.org/
    </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.




<!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
        https://manaschhabra:manaschhabra499@www.geeksforgeeks.org/
    </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

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :