CODEWITHSUNDEEP
javascripthtmlgifanimated-gif
Farhad Enayati
Farhad Enayati

Reputation: 161

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?

Upvotes: 1

Views: 2149

Answers (1)

schraudi
schraudi

Reputation: 96

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

Upvotes: 4

Related Questions