PDA

View Full Version : onMouseOver and AFTER MOUSE OVER - stop the animation, BEST WAY



chopficaro
01-02-2010, 11:22 AM
for example i have:
a picture of a man sitting down
a gif of him going from the sitting position to the standing position
and picture of him standing
i want the man to sit when the page is loaded, go to the standing animation onMouseOver, and when the animation is complete, stop the animation by going to the standing picture

i have heard of two ways to do this but i dont know the best way, or if there is a third alternative with PHP or another language

i could make a timer of the same period of time it takes for the standing gif to complete. i havent done any testing but i would suspect that there would be a bug with this method. some older computers load slower, and the gif may finish its animation before the timer is complete, or the timer may complete before the gif has finished its animation. this might cause gif to start a new cycle before the browser changes pictures, or the browser might change pictures before the man is finished standing. if you know for a fact that this will not happen, or if its occurrence is extremely rare, please alleviate my fears

the second option is to break the gif down with some piece of software into jpegs and make many timers to reassemble the animation. this method was not suggested to me, i came up with it myself, so i dont trust that this is the best way to do things properly

anyone who has ever done this sort of rollover animation in any language, your input would be greatly appreciated

TinyScript
01-02-2010, 05:30 PM
try using the animated gif as the onload for the script

Var img = new Image()
img.onload=init()

function init(){your code goes here}

this way you know the image is loaded before the script begins

chopficaro
01-03-2010, 02:06 AM
is pre loading an image in js just as good as a css image sprite?