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

01-02-2010, 10:23 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

01-02-2010, 01:39 PM
Your fears are justified. There is no way I am aware of to sync up a javascript timer with the anticipated length of time it will take an animated .gif to both load and cycle through once.

However, when you create or edit your animated .gif, you may set it to cycle through only once. This would probably be the best solution still using an animated gif. That way there would be no need to switch to another image after the animated gif, it would remain on its last frame.

Possibly the best solution to this would be to use Flash.

01-02-2010, 01:50 PM
thank you very much
i will investigate both solutions
the first solution you listed will work for most instances of what i had in mind, but it would be nice to go from one animation to another, and perhaps for that i must learn flash

01-02-2010, 11:12 PM
I agree with John: just use your graphics program to set it to only loop once. That's very easy, if your program has the option (it's usually either somewhere in the settings of the animation or when you export/save and are in the "optimization" settings). If you can't find it, you could always find a free gif animator that would do it-- I'm not sure which one would be best, but there are plenty to try.

With gifs, there are only a few basic options, based on limitations of the format, not your code or program:
1. You can have (theoretically) infinitely many images. (Just expect a huge file after a while.)
2. Colors are limited to 256 for the whole animation-- so while this is not a huge problem for a single image, if your animation has a lot of changing colors, it may look simplified because a TOTAL of 256 can be used for all frames combined. (You can limit it further to limit filesize.)
3. The animation can be set to: 1) play once; 2) loop a certain number of times (ex. 5); 3) loop infinitely
4. Each frame can have a certain "delay" attached to it. So if you want a long pause in the animation you do not need to duplicate frames, but just add a delay to that frame. (This is not available in all editors, but should be in many/most.)
5. There are no more options in terms of timing or playback: you cannot jump to a frame, repeat only a section, restart the animation at any point aside from the end, etc.
6. Since these are just images without a player, browsers and computer may play them at slightly different speeds. Basically, if the computer is running slowly (in general, or because of memory usage, etc.), then playback will be slower. They don't play "faster" (than you set in the program), though. This also occurs when loading them the first time (after which they should generally play at normal speed).

Preloading .gifs with javascript can make things smoother, if that is possible in your setup, or needed.

If you want a complex media-heavy site, use flash. HTML (including with Javascript) is not designed to work that way.

01-04-2010, 05:34 AM
alright ill learn flash then