The HTML Image Source Attribute

Introduction
Did you know that you could change the value of an HTML image source attribute? If you do this, the image displayed at the browser would change. In this article I show you the effects of changing the value of the source attribute of the image tag.

You need basic knowledge in HTML, CSS and JavaScript in order to understand this article.

Note: If you cannot see the code or if you think anything is missing in this article (broken link, image absent), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.

HTML Element
An HTML element is produced by either one or two tags. An HTML element is a component of the web page that you see at the browser. The image for example is produced by one tag. The Paragraph element on the other hand is produced by two tags (start and end tag).

The presentation of an element is produced by CSS. Presentation means the looks, position and size of an element.

The Image Element
A simple tag for the image element is:

With this image tag, the CSS presentation would be given by something like

img#ID {width:200px; height:200px}

In this particular presentation the position is not given, but the size is given.

Under this condition, if you change the value of the src attribute you will see a different image at the browser. This feature is very handy.

Changing the Source Attribute
The DOM and JavaScript enable you change the value of the image source attribute. The syntax is:

document.getElementById(ID).src = URL

The expression, "document.getElementById(ID)" returns a reference to the image object. "src" is the source property of the image object. ID and URL must each be in quotes. ID is the identifier of the image object.

Resulting Simplified Code
If it were not possible to change the value of the source attribute of an image, then to change an image you would have to change the whole tag. This would lead to a more complicated code.

Advantages of changing the value of the Source Attribute
- It leads to a simplified code.
- The presentation of the original image is maintained. When you change the value of the source attribute, the size and position of the previous image is maintained. This can be very useful in an image gallery where you have to present a large size image for different images.

Example
When you click the button of the following code, the displayed image would change. Try the code with two of your own images. The image and button is in an HTML Object element. The image is in another object element nested in the outer Object. The outer Object is floated right.

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

function change()
{
document.getElementById('I1').src = "img2.jpg";
}

Some text.

Change

Some text

The purpose of the outer Object element is just to hold the image and the button in one place. The inner Object separates the image from the button.

Animation
Now that it is possible to change the value of the source attribute of the image, you can have code that will be changing the image repeatedly and so produce some animation.

Well, I hope you now appreciate the fact that you can change the value of the source attribute of an image and do a lot with the feature.

Chrys