An image can be made to change when a mouse event is triggered and hence create a slideshow of images or similar.
It relies on using the DOM, a limited version of which was first available in Netscape's version 3 browser (see the tutorial on objects, properties and methods).
When an image is loaded into an HTML page it becomes a property of the document object - but the image is an object in its own right with properties.
The src property of the image object holds the path and file name of the image and JavaScript can be used to write a new path and file name directly to this property - causing it to change to the new image.
If the image isn't already in cache it will download from the server to replace the existing image.
Referring to the image object is made easier if you give it a name within the HTML tag as shown below.
Example Image
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
</head>
<body>
<img src="images/image_1.gif" name="image_1_name">
</body>
</html>
This image can now be referred to with document.images["image_1_name"].src
Using a Click Event
To change the path and file name within the image object requires an event to occur and a JavaScript link can be used to trigger that event.
A simple JavaScript function will act as the event handler and be passed two arguments. The first is the name of the image to change and the second is the path and file name of the image that will replace the original image.
The Event Handler
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script language="javascript" type="text/javascript">
function change(image,new_image){
document.images[image].src=new_image;
}
</script>
</head>
<body>
<img src="images/image_1.gif" name="image_1_name">
</body>
</html>
Finally all that's needed is a JavaScript link that will invoke the event handler when clicked.
The Complete code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script language="javascript" type="text/javascript">
function change(image,new_image){
document.images[image].src=new_image;
}
</script>
</head>
<body>
<img src="images/image_1.gif" name="image_1_name">
<br>
<a href="javascript:change('image_1_name','images/image_2.gif')">Change Image</a>
</body>
</html>
Using an onmouseover Event
Alternatively if you wish to use the image as a link and have it change onmouseover then the code is straightforward.
The same event handler may be used with an HTML link that includes an onmouseover event with arguments to change to the new image and an onmouseout event with arguments to change back to the original image.
With an onmouseover Event
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script language="javascript" type="text/javascript">
function change(image,new_image){
document.images[image].src=new_image;
}
</script>
</head>
<body>
<a href="next_page.htm" onmouseover="change ('image_1_name','images/image_2.gif')" onmouseout="change ('image_1_name','images/image_1.gif')"><img src="images/image_1.gif" name="image_1_name" border="0"></a>
</body>
</html>
Free Web Design Tutorials
Image ReplacementUsing IncludesForm ValidationDebugging
