Gradual opacity control via JS?

[Webmaster]

The following style sets the opacity or semi-transparency in Mozilla and
Explorer browsers for an image:

#myImage{
filter: alpha(opacity=5 0); -moz-opacity:0.50; opacity: 0.50;
}

<img src="someimage. jpg" name="myImage" id="myImage">

The alpha(opacity=5 0 does it in IE and the opacity: 0.50 does it Mozilla.
I'm not sure what purpose -moz-opacity:0.50 serves, as it seems to work
without that, at least on the version Mozilla 1.7.6 I've tested it on.

Naturally it is possible to change a background image by for example:

document.getEle mentById("myIma ge").style.back ground="url(ano therimage.jpg)" ;

Or a normal image:

document.images .myImage.src='a notherimage.jpg ';

Is it possible to gradually replace one image with another by use of opacity
in stages (timeouts), achieve the effect of a typical Flash animation
fade-in fade-out animation, replacing the need of Flash for that. Perhaps
it can be done by combining background and foreground images by timeouts?

The alpha/opacity is as far as I know proprietary IE and Mozilla
non-standard CSS methods, so in any case it couldn't work on all browsers.
Any ideas if and how this could be done would be much appreciated.

Thanks

[James]

Hi all...

First of all thanks for the code you have provided..

try this code which gives the fade in fade out effect with the
timer....
<script>
<!-- Initial Opacity -->
var Opacity=10;
var flag;

function y(Opacity)
{

var Obj = document.getEle mentById('myIma ge')

var str ='alpha(opacity ='+Opacity+')';

Obj.style.filte r = str;
<!-- Recursive Call -->
x();

}

function x(){

if( Opacity > 100 )
flag = 1;

if(z<0)
flag = 0;

if(flag)
Opacity -= 5; <!-- For the Fade out Effect -->
else
Opacity += 5; <!-- For the Fade in Effect -->

var str = 'y('+ z +')';
setTimeout(str, 100);

}
</script>

<form onload='x()'>

</form>

For more Information check this link
http://www.markup.co.nz/dom/style_the_dom.htm

[James]

<script>
var z=10;
var flag;

function y(z){
var Obj = document.getEle mentById('myIma ge')
var str ='alpha(opacity ='+z+')';
Obj.style.filte r = str;
x();
}
function x(){
if(z>100)
flag = 1;
if(z<0)
flag = 0;
if(flag)
z -= 5;
else
z += 5;
var str='y('+z+')';
setTimeout(str, 100);
}
</script>

<style>
#myImage{
filter: alpha(opacity=1 0);
}

</style>

[Evertjan.]

James wrote on 17 nov 2005 in comp.lang.javas cript:

if(z>100)
flag = 1;
if(z<0)
flag = 0;
if(flag)
z -= 5;
else
z += 5;

var incDec = 5;
var z = 10;
..........
incDec = (z>100)?-5:(z<0)?5:incDe c;
z += incDec;
--
Evertjan.
The Netherlands.
(Replace all crosses with dots in my emailaddress)

[Webmaster]

> First of all thanks for the code you have provided..

Thank you for the example. I will test your code. In the meantime I also
found an interesting page on the topic:
http://www.brainerror.net/scripts_js_blendtrans.php
(see the heading "Fading one image into another")

The page explains that "-moz-opacity:" is only for older Mozilla's and that
"opacity:" is the official CSS.

I use an up-to-minute konqueror browser on Linux where the CSS3 standard
"opacity:" is not working, yet I think it works on OSX. But interestingly
there is also a "-khtml-opacity". Thanks again for the example code.

[Webmaster]

James wrote:

<script>
[...]
</style>

I can't get this code running. Did you test run it?