gif animated background image

animated gif css background mozilla

[still learning]

Hello

I'm trying to make a < div > block be a link.
the hover state would be an animated gif I made in Fireworks, and the three other states would be a still gif.

Well I did that, and it doesn't work at all in Mozilla Firefox. But it does display the animated gif if I just put it in a < img src... >

do you have any idea of what I should do? do you think if I was to make the animated gif in an other software it would work?

thanks in advance...

[SuzyUK]

still learning - Welcome to WebmasterWorld

I don't know.. have you tried getting it working without an animated gif first and then substituting the animated gif back in just to check?

also Could it be user settings.. I know I have mine set not to show animated gifs/or is it play once.. I can't remember..

but I've never tried using them as background images so I don't know if it's possible..

Suzy

[jetboy_70]

How are you changing the states, using JavaScript or CSS pseudo-classes (like :hover)?

Are you assigning the behaviour to an <a> element or directly to the <div>?

[createErrorMsg]

Here's another thread [webmasterworld.com] which discusses this same thing. Since I've never used animated gifs, it's techno-babble to me, but maybe it'll make some sense to you.

[still learning]

Thanks for you answers.

Actually I'm a bit confused because even without the background image, with only a colour, it doesn't always work in Firefox.
But it doesn't make sense because sometimes it works and sometimes it doesn't.
I have no idea what's going on.
I did a test on a new page with a new CSS and it worked, but if I do exactly the same thing in the page I am working on, then something goes wrong.
I changed the order of the styles in the CSS file but it doesn't do much.

Anyway, to answer your questions, I'm not using JavaScript, only CSS, and I wrote it like this:

< div class = "anim">
< a href = "drift6.htm"> &nbsp; </a>
</div>

[still learning]

I think I understand what's happening: Firefox doesn't seem to be sensitive to the order of the styles in the CSS file more than IE and Opera.

As soon as I cut and pasted my a:link, a:active, a:visited and a:hover at the top of the sheet (well, after Body) it seemed to work

Is it something you guys already knew?

[createErrorMsg]

a:link, a:active, a:visited and a:hover

The suggested order (by the W3C, details HERE [w3.org]) for pseudoclasses is :link, :visited, :hover, :active. (Mneumonic: LoVe/HAte) The reason for this order has to do with the equal specificity link pseudoclasses share, making the order essential in determining the effect you see.

For instance, in the order you listed, the active state is overridden by the visited state. What effect this could have on an animated gif, I don't know (as I said, I've no experience with them), but if the animation depends upon the link being active, it would explain why it doesn't work (any visited or hovered links would immediately lose their active styles).

Probably not the culprit, but worth looking into.

[still learning]

I will remember this 'love/hate' thing, but I'm not sure it always works. I had always been told to put the Hover last when you want to get some effects, and it's true that some things only work if Hover is last (I think)