Skip to content
Related Articles

Related Articles

HTML | DOM Input Image alt Property

View Discussion
Improve Article
Save Article
  • Last Updated : 12 Jun, 2022

The HTML DOM Input Image alt Property is used set or return the value of the alt attribute of an Input Image. The alt Attribute is used to specify the alternate text for an image. It is useful when the image not displayed. It is used to give alternative information for an image. 

Syntax: 

  • It returns the alt property.
imageObject.alt 
  • It is used to Set the alt property.
imageObject.alt = text 

Property value: It contains the value i.e. text which specify alternative text for an input Image. 

Return value: It returns a string value which represents an alternative text for an Input Image. 

Example 1: This Example returns the alt property. 

html




<!DOCTYPE html>
<html>
 
<head>
    <title>
        HTML DOM Input Image alt Property
    </title>
</head>
 
<body style="text-align:center;">
 
    <h1 style="color:green;">
      GeeksforGeeks
    </h1>
 
    <h4>
      DOM Input Image alt Property
    </h4>
    <input id="myImage" formEnctype="application/x-www-form-urlencoded"
           type="image" formtarget="#" src=
           alt="Geeks_Logo" width="48" height="48" formMethod="post"
           autofocus>
    <br>
    <br>
    <button onclick="my_geek()">Submit </button>
 
    <h2 id="Geek_h" style="color:green;"></h2>
    <script>
        function my_geek() {
 
            // Return Input Image alt Property.
            var txt = document.getElementById(
                "myImage").alt;
            document.getElementById(
                "Geek_h").innerHTML = txt;
        }
    </script>
</body>
 
</html>

Output:

  • Before Clicking On Button:

 

  • After Clicking On Button:

 

Example 2: This Example sets the alt Property. 

html




<!DOCTYPE html>
<html>
 
<head>
    <title>
        HTML DOM Input Image alt Property
    </title>
</head>
 
<body style="text-align:center;">
 
    <h1 style="color:green;">
      GeeksforGeeks
    </h1>
 
    <h4>
      DOM Input Image alt Property
    </h4>
    <input id="myImage" formEnctype="application/x-www-form-urlencoded"
           type="image" formtarget="#" src=
           alt="Geeks_Logo" width="48" height="48" formMethod="post"
           autofocus>
    <br>
    <br>
    <button onclick="my_geek()">Submit </button>
 
    <h2 id="Geek_h" style="color:green;">
 
        </h2>
    <script>
        function my_geek() {
 
            // set Input Image alt Property.
            var txt = document.getElementById(
                "myImage").alt = "submit";
            document.getElementById(
                    "Geek_h").innerHTML =
                "The alt Attribute was changed to " + txt;
        }
    </script>
</body>
 
</html>

Output:

  • Before Clicking On Button:

 

  • After Clicking On Button:

 

Supported Browsers: The browsers supported by HTML DOM Input Image alt Property are listed below:

  • Google Chrome 10.0
  • Firefox 4.0
  • Opera 11.0
  • Safari 5.1

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!