Share this page 

Do simple animationTag(s): Language


<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>
Try it here.

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>
Try it here.

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>
Try it here.

Finally control the animation with buttons. 

<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 animation = true;
var nbImg = 3; // change to the number of different images you have
function animate() {
  if (animation) {
    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();">


<form>
  <input type=button onClick="animation = true;" value="Start">
  <input type=button onClick="animation = false;" value="Stop">
</form>


<IMG src="" width=250 height=50>
</BODY></HTML>
Try it here.
mail_outline
Send comment, question or suggestion to howto@rgagnon.com