Categories: InternetProgrammazione

La Gestione delle Immagini in Javascript

Per manipolare un’immagine è necessario ottenerne il controllo all’interno di uno script, per fare questo occorre riferirsi ad un array di valori del campo images. Questo vettore di valori contiene tutti i riferimenti alle immagini di un documento o pagina web, per avere il controllo su un’immagine occorre quindi ricercarla al suo interno.

<img name="prova" src="test.jpg">

<script language="javascript">
   document.images["prova"]
</script>

oppure

<script language="javascript">
   document.prova
</script>

La seconda versione è equivalente alla prima ed utilizza il riferimento all’elemento che è un metodo più vecchio, le implementazioni del linguaggio più recenti utilizzano il primo metodo.

<html>
<head><title>Immagini in JavaScript</title></head>
<body>

<img name="natura" src="natura.jpg" border="0"
       alt="Un piccolo uccellino" width="250" height="200">
<br>
<script language="javascript">
<!--
document.write("<b>Nome immagine:</b> " +
              document.images["natura"].name);
document.write("<br><b>File immagine:</b> " +
              document.natura.src);
document.write("<br><b>Dimensioni immagine:</b> " +
              document.images["natura"].width + " X " +
              document.images["natura"].height);
-->
</script>

</body>
</html>

Le immagini con il linguaggio JavaScript consentono di creare i rollover, l’effetto più comunemente utilizzato. Per realizzare un rollover è necessario avere 2 immagini, la prima sarà mostrata all’avvio della pagina, la seconda sostituirà la prima quando il cursore del mouse sarà spostato al suo interno ( questo effetto può essere creato anche con i CSS, ne abbiamo parlato in un altro articolo su questo blog ).

<html>
<head>
<title>Immagini in JavaScript</title>
<script language="javascript">
<!--
function dentro()
{
 document.images["natura"].src = "persona.jpg";
}
function fuori()
{
 document.images["natura"].src = "natura.jpg";
}
-->
</script>
</head>
<body>

<a href="#" onmouseover="dentro()" onmouseout="fuori()">
<img name="natura" src="natura.jpg" border="0"
       alt="Un piccolo uccellino" width="250" height="200">
</a>

</body>
</html>

Nell’esempio sopra riportato ho inserito il codice basilare per attuare l’effetto rollover in JavaScript, ma possiamo ad esempio modificare le funzioni inserendo degli argomenti, ad esempio possiamo utilizzare una sola funzione con un valore booleano a seconda se siamo dentro o fuori, oppure attuare più effetti rollover in più parti della pagina inserendo un indice di immagini secondarie.
Poiché la seconda immagine viene caricata dal web nel momento in cui il mouse passa sopra l’elemento, allora c’è un effetto di ritardo nella sua visualizzazione. Per evitare questo problema possiamo ricorrere al caricamento delle immagine sostitutive al momento del caricamento della pagina, il cosiddetto preload delle immagini, nella cache del browser. Il preload delle immagini è possibile effettuarlo istanziando dei nuovi oggetti di tipo Image.

var img = new Array();
img[0] = new Image();
img[0].src = "img1.gif";
img[1] = new Image();
img[1].src = "img2.gif";
...

La funzione che si occupa del preload delle immagini deve essere inserita all’interno dell’evento onLoad della pagina, in questo modo possiamo utilizzare le immagini sostitutive che sono nella cache del browser e che quindi non avranno ritardo nella loro visualizzazione.