html css Gif Animation

Question

I have a .gif playing the animation once. It's doesn't loop and I don't want it to loop.

I have 2 images, ("1 png" and "1 gif animated")

I want that every time when the mouse is over the png image, the gif plays.

My problem is that when I set my mouse positon over the png Image, the gif play one time and stop. When I move the mouse away and then move it back over the image, it doesn't play anymore.

My CSS codes :

#icon{
 float: left;
 width:50px;
 height:50px;
 background: url("images/smal_icon.png") no-repeat scroll 0% 0% transparent;
}
#icon:hover{
float: left;
width:50px;
height:50px;
background: url("images/smal_icon.gif") no-repeat scroll 0% 0% transparent;
}

#icon is a DIV

Answer 1

By default, you can't control the GIF's looping or animation. The browser will just play the GIF as is.

So by default, it is impossible to say whén or how long the GIF should play.

There are three solutions:
1. You replace the src of the img with a data:image so you inline the GIF. Whenever the src changes, the GIF will play again. Using the inline GIF instead of a real URL, there's no redownloading of the GIF, so that saves time. See http://www.websiteoptimization.com/speed/tweak/inline-images/ for an example
2. Like said in the comments, and other answers, you can replace the src of the img tag with the same GIF but with an appendum to the URL (like ?someRandomNumber=1345) so that it will redownload the GIF and play it again. Downside is that the GIF will be redownloaded.
3. You use something like http://slbkbs.org/jsgif/ to download the GIF via AJAX, then draw it using a canvas element, and have full control over it...

Answer 2

You'll need to take the image out of the CSS for this to work, and use img src=

But you could modify this:

// hack for not caching .gifs in ff/chrome etc.
$("img").each( function( ) {
    var src = $(this).attr("src");
    if( /\.gif$/i.test(src)) {
        $(this).attr( "src", src.replace( /\.gif$/, ".gif?rnd=" + Math.floor(Math.random() * 100) + 1));
    }
});

What this does is

• loops through all images on a page
• checks if it's a .gif changes the
• extension to add a random number on the en.

You could turn this into a function and strip out the bits you don't need, so that every time you hover over the png - it will request the .gif image again, because it would have a different number appended to the end of it.