The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Hybrid View

Gif question about repeat vs. non-repeating images...

I have some links in my header of my website that I'm trying to make more attractive by using a tiny gif file that adds visual affect. This gif file is supposed to work like this:

When the user hovers over the image and or link, the image is supposed to display a motion after which the remaining 2 layers of the gif image are supposed to repeat. Keep in mind that the final moment which the mouse remains hovered over the image, it is not in :active mode, but still, in :hover mode.

Can this be done? Have a gif that has only 2 or so images within the entire gif file only repeat while the others are cycled through only once?

No. The only control in animalted gifs is the delay betfore switching to the next image in the loop. When you display an animated gif it starts looping and keeps looping for as long as it is displayed. The only way to start and stop the looping is to switch it for a completely different image.

Let's hypothetically say I have an image of a light switch. When I hover over the image, I want the image to look as if the switch is being flipped, however, as the mouse cursor remains over the switch, I would then want the switch to repeat changing colors between 2 different colors (so far, I would prefer to use a background image somehow).

How could something like this be done? I'm thinking that Java Script would be used somehow, but if not with Java Script, then I have no idea unless there's some CSS I could apply... That's the reason I was hoping I could just set my gif up to somehow only repeat a certain few last frames / images to repeat indefinitely.