HTML DOM Area alt Property

Last Updated : 23 Jun, 2023

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 a single value which specifies the alternate text for the area.

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

Example 1: This example returns the Area alt Property.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>
        HTML DOM Area alt Property
    </title>
</head>
 
 
<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=
"https://media.geeksforgeeks.org/wp-content/uploads/a1-25.png"
         width="300" height="100"
         alt="Geeksforgeeks"
         usemap="#Geeks1">
    <br>
    <p id="GEEK!"></p>
 
    <script>
        function GFG() {
            // Return alt property
           let x = document.getElementById("Geeks").alt;
            document.getElementById("GEEK!").innerHTML = x;
        }
    </script>
</body>
 
</html>

Output:

Example 2: This example sets the Area alt property.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>
        HTML DOM Area alt Property
    </title>
</head>
 
<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=
"https://media.geeksforgeeks.org/wp-content/uploads/a1-25.png"
         width="300" height="100"
         alt="Geeksforgeeks"
         usemap="#Geeks1">
    <br>
    <p id="GEEK!"></p>
 
    <script>
        function GFG() {
 
            // Sets alt property.
            let x = document.getElementById("Geeks").alt = "abcxyz";
            document.getElementById("GEEK!").innerHTML =
                "The alt value has been changed to " + x;
        }
    </script>
</body>
 
</html>