Is a fading background possible?

[_Q_]

Hi,

Does anyone know whether it's possible to incorporate a fading background effect using javascript? Specifically, I'd like one background to fade into another. As far as I can tell, it doesn't seem possible; I'd have to use an image... but I thought I'd ask anyway.

Cheers,
Quenten

[cf2sg]

I thought it will be able to do it with microsoft filter

[Single Paradox]

Somthing like this: http://www.dynamicdrive.com/dynamici...lightgrad2.htm

?

[cf2sg]

you have to prepare several image to swap within given time

[_Q_]

Yeah, I really cant afford to prepare several images...

Apart from being a pain to do, I need to be able to fade into different images. That gets exponentially bad... Bandwidth is an issue too.

What I'm trying to do is change the background of one of my elements upon mouseover events that will occur in my navigation bar. The background of my element should change depending on which section of the nav bar the mouseover occurs in.

Its essentially an image crossfade, but just working with background images rather than <img> elements.

So... what would be great would be an opacity setting for background images, but I dont think that exists.

[Kor]

it might be possible, as I guess that you may modify the opacity of the element (there are cross-browser methods to do that). But in this case everithing nested inside the element will be faded (even it might not be true, as I have never test this kinda). Is this what you want?

[vwphillips]

cant see what difference using background images rather than images will make to bandwidth as the image still has to be loaded

dont know how to fade specifically the backgroundImage of an element, doubt if you can but Images can be behind the element content and faded.

[_Q_]

Well, bandwidth is one of the issues if you want to create lots of images with diferrent opacities, and then swap between images. It isnt really feasible.

Much better to change the opacity of a single image.

It just seems that setting opacity on the background isn't possible.

In some cases setting the opacity of elements with background images might work, but it would be tricky and might not work in all cases.

Anyway thanks for the input everyone!