In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > HTML DOM > properties > alt (area, img, object, ...)

alt property (area, img, object, ...)

Browser support:

Sets or retrieves an alternate text that is displayed when the file associated with the element cannot be displayed.

For example, when the src property of an image element refers to a file that is not available, the alternate text is displayed.

Note that in Internet Explorer, if the title property is not specified, the alternate text is also displayed as a tooltip regardless of whether the file associated with the element can be displayed. In other browsers, the alt property does not specifies a tooltip only an alternate text.

If you want set a tooltip for an element, use the title property instead.

Syntax:

object.alt;

You can find the related objects in the Supported by objects section below.

This property is read/write.

HTML page for this property: alt

Possible values:

String that sets or retrieves the alternate text.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the alt attribute:

See this image:
<div style="color:red">
    <img src="notexisting.gif" alt="Sorry, the image is not available!" />
</div>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of both the alt and title attributes:

<div style="color:red">
    <img src="notexisting.gif" alt="Sorry, the image is not available!" title="This is my first image" />
    <br /><br />
    <img src="picture.gif" alt="Sorry, the image is not available!" title="This is my last image" />
</div>
<br /><br />
Move the mouse pointer over the images to see the tooltips!

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 3:

This example illustrates the use of the alt property in JavaScript:

<head>
    <script type="text/javascript">
        function ChangeAlt () {
            var image = document.getElementById ("myImage");
            image.alt = "The new alternate text.";
        }
    </script>
</head>
<body>
    See this image:
    <div style="color:red">
        <img id="myImage" src="notexisting.gif" alt="Sorry, the image is not available!" />
    </div>
    <br /><br />
    <button onclick="ChangeAlt ();">Change the alternate text!</button>
</body>