Image Fade In & Out

[Nutter]

I have a gallery script that changes the main image when a thumbnail is clicked. No big deal, pretty easy stuff. But, I'd like to have the images fade out and fade the new image back in. Is this possible, and where would I look for more information?

Thanks,
- Ryan

[StupidScript]

Seems like you are describing something that could be easily done by adjusting the "alpha channel" of a .PNG image ... if only browsers supported it.

A kludge might be to create animations that swapped in for the outgoing image (fade-out) and then preceded the display of the incoming image (fade-in), but that's a lot of hooha to shove down the pipe. I've done it in the past, before Netscape got their stuff together regarding cached animations, but it was ridiculous to watch on many computers.

Flash would do it with ease ...

.02

[Nutter]

Flash :-) I'm using SimpleViewer on part of my site for a portfolio gallery. But, I'm getting reports from potential clients that they can't view it so I'm working on a JS version so I'll have both.

What about looping using mozopacity and whatever the IE version is - I know there is one, but I don't remember what it's called off hand.

How would I got about setting opacity to say 5%, waiting half a second & changing to 10%, etc...?

[StupidScript]

Mozopacity for Moz browsers and "filters.alpha.opacity" for IE seems to only work with Moz browsers ...

In other words you can't rely on "filters.alpha.opacity" for IE at all.

<script type="text/javascript">

if (isie) {

document.getElementById('fadeLayer').filters.alpha.opacity = fadelev;

}

if (isns) {

document.getElementById('fadeLayer').style.Mozopacity = fadelev/100;

}

[ ... & loop & check & loop & check ... now breeeeaathe ...]

</script>

<style type="text/css">

#fadeLayer {

position:absolute; filter: alpha(opacity=0); -moz-opacity:0%

}

</style>

<div id="fadeLayer"><img src="someimage.jpg"></div>

Even though the code exists, and despite MS assurances that CSS2 support is robust in MSIE6+, this ain't happenin' in those browsers. Maybe Mr. Marx or Mr. Tribble has more info ... that's all I got! ;)