Come creare un fading incrociato di immagini in pagine html
Forse potrebbe interessarti anche...
Un effetto come la dissolvenza incrociata tra immagini che in Flash risulta semplicissimo da creare, diventa un po’ meno ovvio quando si voglia riprodurlo in una pagina html.
Per fortuna c’è sempre qualcuno che ci pensa prima di noi!
Image Cross Fader Redux è una combinazione Javascript+CSS che fa proprio questo, ed implementarla in una pagina web è semplicissimo:
- richiamiamo i file .js e .css nei tag HEAD, come al solito;
- racchiudiamo tutte le immagini che devono susseguirsi nella dissolvenza in un DIV con id=”imageContainer”;
- modifichiamo nel file xfade2.css il valore di height per adeguarlo alle immagini che useremo.
link: http://slayeroffice.com/code/imageCrossFade/xfade2.html
Bella, ho utilizzato questo sistema sul mio blog. Il risultato lo puoi trovare qui http://www.girandoilmondo.it/ordinary-life/171/cena-prenatalizia-tra-amici-nella-villa-in-campagna
Il problema ora è un’altro.
Se oltre ad una serie di immagini, volessi inserirne altre, sempre a scorrimento più sotto, queste non verrebbero visualizzate. Evidentemente quando si utilizza il DIV vengono caricate tutte le immagini in memoria, e riutillizzandolo ancora nella stessa pagina html va tutto in conflitto.
Esiste un modo per ovviare a questo problema ?
A naso (ripeto: a naso!) direi che basta modificare la funzione so_init() che c’è nel file js.
Le assegnerei una variabile scrivendo…
so_init(nomedelDIV)…e al posto di…
imgs = d.getElementById("imageContainer")…scriverei…
imgs = d.getElementById(nomedelDIV)Infine, la riga che richiama la funzione la tirerei fuori dal JS (richiamandola nel body o comunque da qualche altra parte), richiamando la funzione sul DIV che mi interessa; es.:
window.attachEvent("onload",so_init("ilmioDIV"))Bella li, grazie.
Appena ho un po di tempo ci provo