Q:

play/pause gif with mouse event

I have an image format gif, in my web page.
I want to go with the mouse on any image to run animations. And as long as the mouse is still there, it stays on the last frame and When the mouse stepped back into the original image.
can someone help?

A:

Something like that: 
HTML
<div id="images">
    <div class="img img1">
        <img data-gif_src="http://38.media.tumblr.com/tumblr_mdnaeqwmTr1rtuulro1_250.gif" src="http://i.dailymail.co.uk/i/pix/2011/12/25/article-2078552-0F44CB3D00000578-206_468x331.jpg"/>
    </div>    
</div>

CSS
#images .img {
    width: 200px;
    height: 150px;    
}

#images .img img {
    width: 200px;
    height: auto;    
}

JS
$('#images .img img').mouseenter(function(){
    $(this).data('img_src', $(this).attr('src') );
    $(this).attr('src',  $(this).data('gif_src') );  
}).mouseleave( function(){
    $(this).attr('src',  $(this).data('img_src') ); 
});

on jsfiddle

