Farhad Farhad - 1 year ago 211
HTML Question

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?

Answer Source

Something like that:


<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"/>


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

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


$('#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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download