Author: Real Gagnon
Author's WebSite: http://tactika.com/realhome/realhome.html
<HTML><HEAD>
<SCRIPT>
var img0 = new Image( 250, 50 );
img0.src = "../images/jht.gif";
var img1 = new Image( 250, 50 );
img1.src = "../images/jsht.gif";
var img2 = new Image( 250, 50 );
img2.src = "../images/pht.gif";
var i = 0;
var nbImg = 3; // change to the number of different images you have
function animate() {
document.images[0].src = eval("img" + i ).src;
i++;
if (i == nbImg) i=0;
junk = setTimeout("animate();", 500); // in milliseconds
}
</SCRIPT>
</HEAD><BODY onLoad="animate();">
<IMG src="" width=250 height=50>
</BODY></HTML>
To change an image when clicking on it :
<HTML><HEAD>
<SCRIPT>
var img0 = new Image( 250, 50 );
img0.src = "../images/jht.gif";
var img1 = new Image( 250, 50 );
img1.src = "../images/jsht.gif";
var img2 = new Image( 250, 50 );
img2.src = "../images/pht.gif";
var i = 1;
var nbImg = 3; // change to the number of different images you have
function animate() {
document.images[0].src = eval("img" + i ).src;
i++;
if (i == nbImg) i=0;
}
</SCRIPT>
</HEAD><BODY>
<a href="javascript:animate();"><IMG src="../images/jht.gif" width=250 height=50
ALT="Click to change image"></A>
</BODY></HTML>
Finally changing an image when moving the mouse on it :
<HTML><HEAD>
<SCRIPT>
var img0 = new Image( 250, 50 );
img0.src = "../images/jht.gif";
var img1 = new Image( 250, 50 );
img1.src = "../images/jsht.gif";
</SCRIPT>
</HEAD><BODY>
<a href=""
onMouseOver="document.images[0].src = img1.src;"
onMouseOut="document.images[0].src = img0.src;">
<IMG src="../images/jht.gif" width=250 height=50
ALT="Move the mouse over to change image"></A>
</BODY></HTML>
Posted On: 10-Jul-1999