Results 1 to 5 of 5

Thread: onMouseOver and AFTER MOUSE OVER - stop the animation, BEST WAY

  1. #1
    Join Date
    Dec 2009
    Posts
    44
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default onMouseOver and AFTER MOUSE OVER - stop the animation, BEST WAY

    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

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Dec 2009
    Posts
    44
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  4. #4
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    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.
    Last edited by djr33; 01-02-2010 at 11:27 PM.
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  5. #5
    Join Date
    Dec 2009
    Posts
    44
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    alright ill learn flash then

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •