View Full Version : Stop/start .gif animations

01-13-2006, 07:03 PM
I'm sure there's a way of working around this or coming up with some sort of solution....

I've got several .gif animations on webpages and I want to make start/stop buttons for them so they don't just start playing when the page loads.

Any clever ideas as to how to work this one out?


01-13-2006, 07:23 PM
Basically you'd have a still image (perhaps the first frame of the gif you want to show), and use that as the starting image. Then apply some Javascript to the start and stop buttons to change the image source to the moving gif when they are clicked.

The image you want to change -
<img src="still.gif" id="gif1" alt="image" />

The start image -
<a href="#" onclick="document.getElementById('gif1').src='moving.gif'"><img src="start.gif" alt="play animation" /></a>

The stop image -
<a href="#" onclick="document.getElementById('gif1').src='still.gif'"><img src="stop.gif" alt="stop animation" /></a>

01-13-2006, 09:47 PM
Doing it that way will always revert back to the same image when you stop. If you want to be able to stop at any image then you will need to use a Javascript animation and separate static gifs rather than an animated gif.

01-14-2006, 12:09 AM
Ok thanks that's great but can you just explain a couple of bits a little more.

The second two bits are within the JavaScript? Do I just start JavaScript, copy them in and then end the JavaScript? Or do I need the first bit in the javascript too?

And you've used the examples "still", "moving", "start", "stop"
Moving's obviously going to be the animation, and what are the other three? I'd guess still and stop are going to be that still image you were talking about (intro.gif for sake of argument) but what's start?


01-14-2006, 12:33 AM
Right... still.gif is the first frame of the animation, moving.gif is the animated gif, start.gif is a start button - when clicked it will start the animated gif, stop.gif is a stop button - when clicked it will stop the animated gif.

I've created an example here -


The only Javascript is within the onclick events; you can change the start and stop images for buttons/links if you really want.

01-14-2006, 01:04 AM
thank you!!! you legend thanks it's all working now :D

02-24-2009, 03:54 PM
Hi, folks,

newbie trying to flog a dead thread here.

Basically, I'm trying to play a gif animation when I mouse over this button. When I mouse out of the button, the animation will stop playing.

I am facing the same problem as Bombproofgp. However mine's a little different: I do not need a stop button. I just need the gif animation to stop playing when I mouse out.

I tried experimenting with mark87's code but I keep ending up with two buttons.

<a href="# "onmouseover="document.getElementById('gif1').src='moving.gif'"><img src="3fingers.jpg" width="364" height="363"alt="play animation" /></a>

<a href="# "onmouseout="document.getElementById('gif1').src='still.gif'"><img src="3fingers.jpg" width="364" height="363"alt="stop animation" /></a>

Any help will be greatly appreciated.

Thanks in advance :)

02-24-2009, 10:34 PM
Well if you don't mind reverting to the same image on mouseout you could just do something like this (broken up over a few lines to make it easier to read):

You would make a still of the first frame of the gif and save it as a JPEG, then upload the files into the same directory as the HTML file (or alternatively you could put them in any directory you wanted so long as you update the file paths from the example above). I haven't tested this code for syntax in an actual page, but I believe it is all correct. Give this a shot and let me know if this is what you're looking for.

Having the image stop dead on the frame it was on when the user moved the mouse away is more complicated...

02-25-2009, 11:04 AM
Hi, Rowsdower,

Thanks for the prompt reply.

However I think I did not make myself clear enough on my previous post.

What I'm trying to do is to play a gif animation when I mouse over button A.

The gif animation is a gif image that will be played outside button A.

When I mouse out of button A, the gif animation will stop playing and revert to it's first frame.

So there are basically 3 things involved:

1) a button (starts playing gif animation on mouseover)

2) a static gif image( when mouse out of button)

3) an animated gif (that starts playing on mouse over button A)

Most importantly, the gif animated image and the the button are not placed together.
They are two separate elements.

Sorry for not making myself clear previously.

I really appreciate your help, Rowsdower.

Hopefully you can help me out on this.

Many thanks for your time :)

02-25-2009, 12:42 PM
A place for your animation:

<img id="gif_1" src="3fingers.jpg" alt="whatever" />

And then make your button - in this case it is another image [my_button.jpg], but you're free to use whatever page element you want, just keep onmouseover/onmouseout:

<img id="button" src="my_button.jpg" alt="whatever"

As a link:

<a href="#" onclick="return false;"
Hover over me to start animation.</a>

02-25-2009, 01:24 PM
Thanks, freedom_razor!

Works well. Thank you so much taking your time to help out a newbie like me :)

08-17-2009, 06:36 PM
hello coding gurus,

ive been trying to figure something out for a couple of weeks now, and ive tried reading the well knowledged posts before mine but unfortunately I cannot get this to work. maybe this is because i have no coding skill or im just not capable, but i have faith that someone may be nice enough to help someone in distress.

heres the problem:

user fills info into a couple boxes and chooses a selection from a dropdown box. (no validation, he can enter anything or choose any option from the drop down)
user clicks submit button.
under submit button now displays animated gif showing a 'checking' kind of graphic, like its checking for validation with stripes moving across.
after a set amount of time, (4 seconds) the once moving gif, now becomes a static 'accepted' gif and ungreys a form below for more user details.

can anyone help me?

Thanks to all in the forum

08-17-2009, 06:51 PM
I am re-working for my site http://beta-1-3d-glucan.com, I am planning to have a picture animation at the Beta-1,3D Glucan picture at the right top of the page. I would like to have the picture and some title altered and animated. I hope you experts could give me an advice on what software I may use in doing this. Or is there any training and trials about this? Thanks in advance. :)