During crossfade, page background intrudes

[Charles Packer]

I found a script to crossfade between two images that works
okay except that in the middle of a fade when both images
have equal opacity, the combined images also are tinted
by the page background color. Evidently the images are
alpha-composited not only with each other, but by default with
the background as well, creating an effect I definitely
do not want. I demonstrate this at
http://cpacker.org/afader
in which I use a blue background to make the effect obvious.
As far as I can tell, nothing in the script
http://cpacker.org/afader/xfade2.js
is doing this explicitly and so I don't know at what level this
rogue compositing is being done or whether I can gain
control over it in Javascript at all. Any ideas would be
appreciated.

 

[Jorge]

I found a script to crossfade between two images that works
okay except that in the middle of a fade when both images
have equal opacity, the combined images also are tinted
by the page background color. Evidently the images are
alpha-composited not only with each other, but by default with
the background as well, creating an effect I definitely
do not want.  I demonstrate this athttp://cpacker.org/afader
in which I use a blue background to make the effect obvious.
As far as I can tell, nothing in the scripthttp://cpacker.org/afader/xfade2.js
is doing this explicitly and so I don't know at what level this
rogue compositing is being done or whether I can gain
control over it in Javascript at all. Any ideas would be
appreciated.

An opacity of less than one means that the image is somewhat
transparent, so there's no way to avoid seeing the background through.
But you probably ought to set up the target image below the current
image (and with opacity= 1.0), and fade just the current image from
opacity= 1.0 to opacity= 0.0.

--Jorge.

 

[Jorge]

An opacity of less than one means that the image is somewhat
transparent, so there's no way to avoid seeing through it.
But you probably ought to set up the target image below the current
image (and with opacity= 1.0), and fade just the current image from
opacity= 1.0 to opacity= 0.0.

A demo : http://preview.tinyurl.com/5exjxk

--Jorge.

 

[David Mark]

I found a script to crossfade between two images that works
okay except that in the middle of a fade when both images
have equal opacity, the combined images also are tinted
by the page background color. Evidently the images are

Lousy script, which is typical of scripts you find floating around the
Internet.

The setOpacity function has the old FF blink fix in it:

function setOpacity(obj) {
if(obj.xOpacity>.99) {
obj.xOpacity = .99;
return;
}
obj.style.opacity = obj.xOpacity;
obj.style.MozOpacity = obj.xOpacity;
obj.style.filter = "alpha(opacity=" + (obj.xOpacity*100) + ")";
}

That first if clause looks suspiciously like the old FF blink fix.
Perhaps that is the problem. Search the group for a better setOpacity
function.

 

[Charles Packer]

A demo : http://preview.tinyurl.com/5exjxk

Ahh! I understand now. Thanks very much.