Menu

Wednesday, March 14, 2007

Animate Images- Moving one by one

Create a folder called "images2" and put all pictures into that folder.

<SCRIPT>
// Create a bunch of off-screen images, and get them started
// loading the images we're going to animate.
images = new Array(5);
for(var i = 0; i <6; i++) {
images[i] = new Image();//Create an Image object
images[i].src = "images2/" + i + ".gif";
// tell it what URL to load
}
// knowing that they've been loaded into the cache. Note that we perform
// the animation by assigning the URL, not the Image object itself.
// Also note that we call the image by name, rather than as document.images[0]
function animate()
{
document.animation.src = images[frame].src;
frame = (frame + 1)%6;
timeout_id = setTimeout("animate()", 750);
// display next frame later
}
var frame = 0;
// keep track of what frame of the animation we're on.
var timeout_id = null; // allows us to stop the animation.
</SCRIPT>


<IMG SRC="images2/0.gif" NAME=animation width="232" height="190"></td>
<td width="7" height="21"> </td>

----------------------------------------------------------------------------------