Preload di immagini per effetti di rollover (mouseover)

Questo articolo fa parte del progetto Independent Codes
Ecco un veloce metodo per realizzare un preload di immagini, ad uso rollover. In questo modo, avendo precaricato le immagini, non ci sarà tempo di attesa nel cambio di una immagine (ad es. un bottone che si “illumina”) quando ci si passa sopra con il mouse (il classico effetto mouseover).

Questa parte va nella sezione Head della pagina


<script language=javascript> var imgOver1=new Image(), imgOut1=new Image(); imgOver1.src="images/bottone1_over.png"; imgOut1.src="images/bottone1.png"; </script>


Mentre questa va nel body


<img decoding="async" src="images/bottone1.png" onmouseover="this.src=imgOver1.src;" onmouseout="this.src=imgOut1.src;" border="0" class="b1">