Is there a way to pause a gif in my website?

Figory said:

I created a basic gif and included it into the rapid weaver site I am building. However I really want to be able to pause the gif on hover

Is this possible? I'd be really grateful for any info

my test site is here where you can see the gif

THANKs for any help!

Click to expand...

I'm not sure if this is possible. If it is possible, it would be pretty complex and would require some custom javascript programming.

A simpler way to do this would be to generate individual images and have the images cycle using a jQuery plugin. Then have the animation stop when you hover over an image.

Here is one plugin that could do what I've described. You would need to turn off any effects so that the animation is seamless. Also adjust the speed, of course to match your animated gif.

http://jquery.malsup.com/cycle/
http://jquery.malsup.com/cycle/none.html
http://jquery.malsup.com/cycle2/

Let me know if you have any questions. Hope this helps.

Or, you could create a new image from a single frame, and change the animated gif to the still image on hover.

Darth.Titan said:

Or, you could create a new image from a single frame, and change the animated gif to the still image on hover.

Click to expand...

You would need to make sure the animation has finished loading and then programmatically measure which frame of the animation it is on (by setting the timing so that it knows which frame it's on). Then once the user has moved their mouse off of that area, you would need a way for the animation to begin again from the frame which was last shown, which I believe, is not something that can be controlled via javascript.

Unless I'm totally over thinking it and there is a much simpler way.

Apple Key said:

You would need to make sure the animation has finished loading and then programmatically measure which frame of the animation it is on (by setting the timing so that it knows which frame it's on). Then once the user has moved their mouse off of that area, you would need a way for the animation to begin again from the frame which was last shown, which I believe, is not something that can be controlled via javascript.

Unless I'm totally over thinking it and there is a much simpler way.

Click to expand...

No, I absolutely would not do all that (Pretty sure what you described is not even possible). Not knowing how complex the OP's animated gif and requirements are I simply meant to provide a quicker alternative solution That could work perfectly well depending on the situation.

If the level of perfection you describe was required, your first suggestion would be the way to go.

It will work perfectly. Look at the cat at the bottom of this page : http://www.patrimoine-charlevoix.net/html/aine.html
It's a simple hover action.You could just inverse that behaviour.
Good luck.

Darth.Titan said:

No, I absolutely would not do all that (Pretty sure what you described is not even possible). Not knowing how complex the OP's animated gif and requirements are I simply meant to provide a quicker alternative solution That could work perfectly well depending on the situation.

If the level of perfection you describe was required, your first suggestion would be the way to go.

Click to expand...

I guess I kind of assumed the OP wanted it to resume from where it left off when the user stopped hovering over the image. The image flashes very quickly from one frame to the next, and that's why I thought it made sense to do that. It's 7 frames shown for 0.3 seconds per frame.

If not, then your solution would work well and be quick to implement, as you mentioned.