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=50); -moz-opacity:0.50; opacity: 0.50;
}

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

The alpha(opacity=50 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.getElementById("myImage").style.background="url(anotherimage.jpg)";

Or a normal image:

document.images.myImage.src='anotherimage.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.getElementById('myImage')

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

Obj.style.filter = 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.getElementById('myImage')
var str ='alpha(opacity='+z+')';
Obj.style.filter = 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=10);
}

</style>

 

[Evertjan.]

James wrote on 17 nov 2005 in comp.lang.javascript:

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)?-5z<0)?5:incDec;
z += incDec;

 

[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]

<script>
[...]

</style>

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