Animated gif and hover

Tripnologist · 16 Sep 2008 at 10:33

I'm not holding my breath but maybe someone here might have run into the same problem before.

Client had a website which was all tables so we redid it for them with proper xhtml/css. They had animations that played on nav hover. It was done with JS and basically just cycled through a bunch of images to 'play' the animation. I combined them all into single .gifs and had them display: none and then changed it to display: block on hover. Now, here is the problem..

It works in IE7 and Safari but will only play the animation once. When you hover over it more than once, it just skips to the last frame of the animation.
It works perfectly fine in IE6, FF2, FF3 and Opera.

Anyone have any ideas?

GravyMonster · 16 Sep 2008 at 10:57

Have the gif's been created so that they loop infinitely?

Tripnologist · 16 Sep 2008 at 11:06

No, unfortunately, the way they want them done means they can only play once.

I do realise that this is what is causing the problem but what I don't get is why display:none and display: block isnt' enough to cause IE7 and Safari to replay the animation but it is in every other browser.

Shoseki · 16 Sep 2008 at 11:16

Tripnologist said:
No, unfortunately, the way they want them done means they can only play once.

I do realise that this is what is causing the problem but what I don't get is why display:none and display: block isnt' enough to cause IE7 and Safari to replay the animation but it is in every other browser.

Non-standard functionality, that is why. Clearly the object being displayed using block isn't enough to trigger the refresh/redraw of the animation from the beginning. You'll have to find a way to trigger it manually or find another way to do your rollover.

Tripnologist · 16 Sep 2008 at 12:35

Thanks Shoseki, that's pretty much what I figured. I didn't like doing it this way but they wanted it to look exactly the same as the original. Couldn't keep the mass amount of JS due to our CMS and SEO and couldn't use flash. Bleh.

Shoseki · 16 Sep 2008 at 13:42

Tripnologist said:
Thanks Shoseki, that's pretty much what I figured. I didn't like doing it this way but they wanted it to look exactly the same as the original. Couldn't keep the mass amount of JS due to our CMS and SEO and couldn't use flash. Bleh.

Well, there is an alternative considering it is a gif and nothing fancier. You can make a "slideshow" div using javascript and store the contents of the slideshow as seperate frames within a single gif and simple move the gif...

[][][][][][][][]

and only show the current gif...

Then you can control the speed and direction of the animation using javascript.