cheeseman
asked on
Animation
I have a document with ten pictures on it. I am trying to get the tenth picture to be an animated version of all the others - it will cycle between image 1, image 2, image 3... etc
1) How can I do this without using a seperate object for each picture (can I, since they are already on the page somewhere)?
2) How do I string the frames together? I tried setting my animate procedure in the mouse over event of all the links on the page, but that still only works if the user moves the mouse continuously over the page!!!!
If someone could provide commented source for this, I would be happy to give you a buncha points and my first born male child.
Thanks!!!!!!!
1) How can I do this without using a seperate object for each picture (can I, since they are already on the page somewhere)?
2) How do I string the frames together? I tried setting my animate procedure in the mouse over event of all the links on the page, but that still only works if the user moves the mouse continuously over the page!!!!
If someone could provide commented source for this, I would be happy to give you a buncha points and my first born male child.
Thanks!!!!!!!
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks alot! I'll FedEx you the kid right away! =)
You don't need to use mouse events to achieve that. Rather, you should set a timeout on the window, and let it repeat your
procedure every so often.
First you need to name all those images you want to animate. Make sure the names have the same prefix, and sequential
numbers, like so -
<IMG SRC="Picture0.gif" NAME="Logo0">
<IMG SRC="Picture1.gif" NAME="Logo1">
<IMG SRC="Picture2.gif" NAME="Logo2">
<IMG SRC="Picture3.gif" NAME="Logo3">
<IMG SRC="Picture4.gif" NAME="Logo4">
<IMG SRC="Image5.gif" NAME="Logo5">
<IMG SRC="Image6.gif" NAME="Logo6">
<IMG SRC="Image7.gif" NAME="Logo7">
<IMG SRC="Image8.gif" NAME="Logo8">
<IMG SRC="Image9.gif" NAME="Logo9">
and you need to name the image you want to animate -
<IMG SRC="Image9.gif" HEIGHT=151 WIDTH=135 NAME="Swap">
Now you need to add the engine to swap them.
<SCRIPT LANGUAGE="Javascript">
<!--
// this tests for a browser that can animate images in this manner
browser = (((navigator.appName == "Netscape") &&
(parseInt(navigator.appVer
((navigator.appName == "Microsoft Internet Explorer") &&
(parseInt(navigator.appVer
// the last frame of our animation
MaxFrame = 9;
// frame to start at
TimerStep = 0;
// ticks between frames
TimerSpeed = 120;
// this will be our main function
function TimerTick() {
// if we found a browser this will work in
if (browser) {
// go to the next frame
TimerStep++;
// return to the first frame if we pass the last
if (TimerStep > MaxFrame) {
TimerStep = 0;
}
// swap to the next image
document ["Swap"].src = document ["Logo" + TimerStep].src;
// set the timer
window.setTimeout("TimerTi
}
}
//-->
</SCRIPT>
Now, all you have left to do is to start it all off by running the TimerTick procedure when the document loads -
<BODY onLoad="TimerTick();">
Hope this helps!