Lo script che presentiamo offre la possibilità di creare un rollover istantaneo senza tempi di attesa. Con i normali javascript, infatti, siamo soggetti ad un leggero ritardo nel cambio da un'immagine all'altra (dipendente soprattutto dalla velocità di connessione e del server). Con il codice di oggi invece, che sfrutta l'attributo "hsrc", non avremo questo problema e non bisognerà attendere il completo caricamento degli elementi grafici.
Lo script funziona perfettamente con il DOM di Explorer 5.x e Netscape 6.x mentre con i browser più vecchi, ad esempio Navigator 4.x, verrà visualizzata solo la prima immagine.
Ovviamente, per scoprire i reali vantaggi di questo metodo, la demo andrebbe visualizzata online e confrontata con un classico rollover in javascript.
- esempio.htm
- 01.gif
- 02.gif
- bottone_on.gif
- bottone_off.gif
Per una più semplice comprensione del presente script fai continuamente riferimento ai file sopracitati, verificando le procedure e i dati espressi. Solo in questo modo, con un continuo confronto, comprenderai le peculiarità di questo Javascript.
Inseriamo il codice tra i tag <head> della pagina:
<script type="text/javascript">
function init() {
if (!document.getElementById) return
var imgOriginSrc;
var imgTemp = new Array();
var imgarr = document.getElementsByTagName('img');
for (var i = 0; i < imgarr.length; i++) {
if (imgarr[i].getAttribute('hsrc')) {
imgTemp[i] = new Image();
imgTemp[i].src = imgarr[i].getAttribute('hsrc');
imgarr[i].onmouseover = function() {
imgOriginSrc = this.getAttribute('src');
this.setAttribute('src',this.getAttribute('hsrc'))
}
imgarr[i].onmouseout = function() {
this.setAttribute('src',imgOriginSrc)
}
}
}
}
onload=init;
</script>
Una delle peculiarità di questo codice è la semplicità d'uso: nessun parametro andrà modificato.
Ciò che invece dovremo personalizzare, ovviamente, sono i tag <img src...> che richiamano le immagini su cui vogliamo applicare l'effetto rollover.
Ecco un classico esempio:
<img src="off.gif" hsrc="on.gif"/>
In sostanza si tratta semplicemente di aggiungere l'attributo "hsrc" ad un normale tag <img src...>
Questo nuovo attributo conterrà il percorso che porta all'immagine che sostituirà quella iniziale.
Altre modifiche non sono necessarie.
