fade in e fade out immagini

[goxpix]

Ciao a tutti,

io non sono molto pratico di Javascript e ho un dubbio. Io vorrei farmi una rotazione di immagini in background in una pagina XHTML e mi piacerebbe che cambiassero con effetto sfumato.

L'effetto fade in ce l'ho fatta, ma mi piacerebbe creare anche l'effetto contrario. Posto il codice Javascript:

<script type="text/javascript">
<!--
document.write("<style type='text/css'>#bg {visibility:hidden;}</style>");


function initImage() {
	imageId = 'bg';
	image = document.getElementById(imageId);
	setOpacity(image, 0);
	image.style.visibility = "visible";
	fadeIn(imageId,0);
}
function fadeIn(objId,opacity) {
	if (document.getElementById) {
		obj = document.getElementById(objId);
		if (opacity <= 100) {
			setOpacity(obj, opacity);
			opacity += 10;
			window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100);
		}
	}
}




function setOpacity(obj, opacity) {
	opacity = (opacity == 100)?99.999:opacity;
	// IE/Win
	obj.style.filter = "alpha(opacity:"+opacity+")";
	// Safari<1.2, Konqueror
	obj.style.KHTMLOpacity = opacity/100;
	// Older Mozilla and Firefox
	obj.style.MozOpacity = opacity/100;
	// Safari 1.2, newer Firefox and Mozilla, CSS3
	obj.style.opacity = opacity/100;
}
//window.onload = function() {initImage()}
// -->
</script>

<script type="text/javascript">
			rotatingImages = new Array("images/home/_MG_1077-2.jpg","images/home/IMG_2115.jpg","images/home/IMG_4180.jpg","images/home/IMG_4250.jpg");
			
			imageCount = rotatingImages.length;
			firstTime = true;
			duration = "5"; //seconds
		
			function rotateImage(){
					if (document.getElementById('bg').complete || firstTime){
					if (firstTime) {
						thisImage = Math.floor((Math.random() * imageCount))
						firstTime = false
					}else{
						thisImage++
						if (thisImage == imageCount) {
							thisImage = 0
						}
					}
					document.getElementById('bg').src = rotatingImages[thisImage]
					setTimeout("rotateImage()", duration * 1000)
					initImage()
				}
			}
		</script>
		
		
[...]


[img][/img]
<script type="text/javascript">
	rotateImage();
</script>

Qualcuno sa darmi una dritta?

Grazie a tutti

[longilineo]

utilizzando jquery in pochissime righe fai tutto quanto

var tempo = 100; //in millisecondi
$("#myimage").fadeOut(tempo); //nascondo un elmento con id myimage in 100 millisecondi
$("#myimage").fadeIn(tempo); //mostro un elemento con id myimage in 100 millisecondi

Per funzionare fadeIn vuole che l'elemento da mostrare abbia impostato da css display: none