Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Rollover istantaneo

Link copiato negli appunti

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.


Ti consigliamo anche