RedOnWeb: FadeIn e FadeOut con javascript

Effetto carino da usare sul web.
Problema : Flash è uno sperco per una cosa cosi semplice, le gif animate pesano troppo.

Soluzione: Javascript e CSS !

Funzione de inizializzazione :

function initImage() {
// start
imageId = 'uno';
var uno = document.getElementById(imageId);
imageId = 'due';
var due = document.getElementById(imageId);
imageId = 'tre';
var tre = document.getElementById(imageId);
imageId = 'quattro';
var quattro = document.getElementById(imageId);
setOpacity(uno, 100);
setOpacity(due, 100);
setOpacity(tre, 100);
setOpacity(quattro, 100);
loop();
}

Prendiamo ad esempio 4 immagini con ID uno, due, tre e quattro. La prima, l'immagine di partenza avrà opacità 100, le altre 0.

L'opacità la andiamo a settare con questa funzione, che con particolari accorgimenti funziona sul 99.9% dei browser

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;
}

La funzione Loop poi si preoccupa di far partire gli effetti di Fade-in e Fade-out in precisi momenti grazie alla funzionalità setTimeout.

function loop() {
fadeOut('uno',100);
fadeIn('due',0);
window.setTimeout("fadeOut('due',100)", 2000);
window.setTimeout("fadeIn('tre',0)", 2000);
window.setTimeout("fadeOut('tre',100)", 4000);
window.setTimeout("fadeIn('quattro',0)", 4000);
window.setTimeout("fadeOut('quattro',100)", 6000);
window.setTimeout("fadeIn('uno',0)", 6000);
window.setTimeout("loop()", 8000);
}

Il primo parametro è la funzione da richiamare, il secondo è il ritardo con cui farlo. Espresso in millisecondi.

Ed ecco le funzioni di fade in e fade out, molto simili tra loro. Utilizzano anch'esse il setTimeout

Mentre per quanto riguarda l'HTML la struttura deve essere questa:

Nel body ci va :
<body bgcolor="#ffffff" onLoad="initImage()">

e nel testo si mette una cosa del genere opportunamente adattata al vostro caso:
<div id="container" style="position:relative; left:0px; top:0px; width:395px; height:322px; z-index:1; overflow:hidden; ">
<div id="Image1" style="position:relative; left:0px; top:0px; width:395px; height:322px; z-index:2;"><img id='uno' src="images/HP_img1.gif"></div>
<div id="Image2" style="position:relative; left:0px; top:-322px; width:395px; height:322px; z-index:5; overflow: hidden;"><img id='due' src="images/HP_img2.gif"></div>
<div id="Image3" style="position:relative; left:0px; top:-644px; width:395px; height:322px; z-index:10; overflow: hidden;"><img id='tre' src="images/HP_img3.gif"></div>
<div id="Image4" style="position:relative; left:0px; top:-966px; width:395px; height:322px; z-index:15; overflow: hidden;"><img id='quattro' src="images/HP_img4.gif"></div></td>
</div>

Il container non è opzionale, come anche l'overflow:hidden.
Da notare anche il top progressivamente sempre piu negativo in modo che si sovrappongano.