Uno degli articoli più interessanti usciti recentemente è Photo Fades, con il relativo esempio Onload image without Flash, in cui viene presentato uno script per ottenere un effetto di trasparenza variabile sulle immagini cross-browser. Funziona infatti con Internet Explorer 5.5 o superiore, Mozilla, Firefox, Safari e Konqueror. Vedremo in questo articolo alcune applicazioni dello script che si presta a fornire effetti grafici decisamente accattivanti.
Opacità variabile al caricamento di un'immagine
Come primo esempio ho ripreso l'esempio dell'articolo originale. Si tratta di un immagine con effetto fade in entrata: al caricamento dell'immagine viene mostrata una scritta "loading". Una volta caricata l'immagine, questa verrà mostrata con una trasparenza variabile, fino a diventare totalmente opaca, ossia coprente.
Prima di vedere il codice Javascript, vediamo come configurare una qualsiasi pagina con un'immagine a opacità variabile al caricamento. Ho fatto di modo che non siano necessarie conoscenze di Javascript per aggiungere l'effetto, ma solo un minimo di HTML e CSS. Vediamo il codice HTML dell'esempio:
<div id="imagecontainer">
<img id="relax" src="relax.jpg" alt="just relax">
</div>
In sostanza, nell'HTML è necessario che l'immagine sia racchiusa in un contenitore e che entrambi abbiano un id. Ora il CSS: questo dovrà contenere una semplice regola che attribuisce al contenitore dell'immagine le dimensioni dell'immagine stessa e l'immagine di sfondo ("loading.jpg") che verrà sistemata come sfondo e centrata:
div#imagecontainer{width: 600px;height:300px;
background:url(loading.jpg) no-repeat 50% 50%}
Ora veniamo al Javascript. È necessario aggiungere nella sezione head della pagina le seguenti righe:
<script type="text/Javascript" src="fade.js"></script>
<script type="text/Javascript">
var imageId="relax";
document.write("<style type='text/CSS'> #"+ imageId +"{visibility:hidden;} </style>");
window.onload = function(){initImage(imageId)};
</script>
Le righe appena viste hanno lo scopo di linkare il file fade.js (il cui contenuto vedremo tra poco), nascondere l'immagine finchè essa non è caricata e attivare la transizione. Da notare che ho riportato in grassetto l'unica cosa che dovrete modificare, ossia l'id attribuito all'immagine nel codice HTML.
Lo scriptz
Vedremo ora brevemente lo script, che consente l'effetto di transizione su un buon ventaglio di browser. Chi non è pratico di Javascript può senz'altro passare all'esempio successivo. La parte essenziale dello script originale è la seguente:
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 appena vista utilizza la proprietà CSS3 opacity e alcune proprietà CSS non standard per aggiungere l'opacita grazie a Javascript. Riceve un riferimento a un elemento e un numero intero da 0 a 100 che indica l'opacità: al valore zero corrisponde opacità nulla (e quindi trasparenza totale), mentre al valore 100 corrisponde opacità totale (ossia nessuna trasparenza). La funzione appena vista viene richiamata ripetutamente su un immagine grazie alla seguente funzione:
function fadeIn(objId,opacity){
if(!document.getElementById) return;
obj = document.getElementById(objId);
if(opacity <= 100){
setOpacity(obj,opacity);
opacity += 10;
window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100);
}
}
Questa riceve l'id e il valore iniziale di opacità, che viene aumentato progressivamente di dieci unità ogni cento millisecondi, fino ad arrivare al valore finale di cento.
Le due funzioni, più qualcun'altra che può venire utile, si possono trovare nel file fade.js che è disponibile per il download ed è consultabile online in questa pagina.
Opacità variabile al passaggio del mouse
Vediamo ora brevemente il secondo esempio: si tratta di un'immagine in cui l'effetto di transizione viene applicato al passaggio del mouse. HTML e CSS sono identici all'esempio appena visto. Il Javascript si occupa di gestire gli eventi onmouseover e onmouseout sull'immagine, avviando il processo di transizione per entrambi. Vediamo come configurare lo script. Nella sezione head della pagina le righe per il Javascript sono le seguenti:
<script type="text/Javascript" src="fade.js"></script>
<script type="text/Javascript">
window.onload=function(){
if(document.getElementById){
setFade("relax");
}
}
</script>
Le cose da fare per attivare lo script su una qualsiasi pagina sono due: copiare il file "fade.js" nella stessa cartella della pagina HTML, e modificare l'id dell'elemento su cui associare la transizione, riportato in grassetto nel codice sopra. Essendo un effetto dinamico, condizionato al passaggio del mouse, quello che consiglio di associarlo ad un link grafico, garantendo così un bell'effetto rollover. Ora passiamo al terzo e ultimo esempio.
Galleria di immagini con transizioni di caricamento
Ho pensato che la transizione di caricamento può rendere molto bene se applicata ad un esempio che abbiamo visto in un altro articolo, ovvero la Galleria di immagini con ingrandimento nella stessa pagina. Vediamo subito la nuova versione.
Rispetto alla versione originale, nell'HTML ho eliminato il titolo delle immagini, mentre nel CSS ho aggiunto un effetto ombra. Il Javascript, grazie alle funzioni di opacità che abbiamo visto, si occupa di variare l'opacità al passaggio del mouse sulle miniature (dando così un effetto rollover) e di mostrare gli ingrandimenti con opacità progressiva. Per i dettagli sull'ingrandimento nella stessa pagina rimando all'Galleria di immagini con ingrandimento nella stessa pagina, ricordando che nell'HTML è essenziale che le miniature siano contenute in un div id="minipics" e l'ingrandimento abbia id="bigimage".
All'inizio l'immagine per l'ingrandimento viene usata per informare l'utente sulla modalità di interazione: è una semplice immagine con la scritta "clicca sulle miniature per vedere gli ingrandimenti". Nel suo contenitore (div id="zoom") via CSS è impostato lo sfondo con la scritta "loading". Per il resto, è tutto compito del Javascript. In questo caso ho creato un file Javascript unico, linkato nella sezione head in questo modo:
<script type="text/Javascript" src="onpage.js"></script>
Il file Javascript dovrà essere sistemato nella stessa cartella della pagina HTML con la galleria. Per la consultazione online, il codice Javascript commentato si può trovare in questa pagina.
Tra i browser moderni, l'unico che non ha il supporto per l'opacità è (per ora) Opera. Credo che nelle future versioni troveremo implementata anche la proprietà CSS3 opacity. La galleria sarà comunque perfettamente funzionante, solo che non mostrerà gli effetti di transizione. Per il resto, browser obsoleti o con Javascript disabilitato mostreranno gli ingrandimenti in una pagina contenente solo l'immagine, e sarà possibile ritornare alla galleria attraverso il tasto indietro del browser. Anche questo è un caso in cui Javascript va a migliorare l'interazione senza sacrificare l'usabilità e l'accessibilità di una pagina, come abbiamo visto nella serie sull'interazione con Javascript.
Codice, immagini ed esempi sono disponibili per il download. Alla prossima.
