Cambiare le Immagini

Per creare animazioni veramente dinamiche e demo dovreste addentrarvi nell'arte di mutare le immagini a comando. In questa lezione, cambierò in modo dinamico l'"imageA" in "imageB":

 
imageA.gif
 
imageB.gif

Dovete assicurarvi che le due immagini siano grandi uguali, altrimenti quando le scambiate l'immagine da sostituire verrà conformata allo spazio lasciato dalla vecchia. Se però volete scambiare immagini di differente forma lo farete nascondendo il vecchio layer e mostrando il nuovo, il codice di questa lezione non funziona in questi casi.

Per iniziare, dovete mostrare una delle immagini - ho quindi impostato una tag di tipo DIV che chiamiamo imgDiv con dentro la "imageA":

<DIV ID="imgDiv">
<IMG NAME="myImg" SRC="imageA.gif" WIDTH=75 HEIGHT=75 BORDER=0>
</DIV>

Notate che ho dato un nome all'immagine (myImg), questo nome verrà usato per operare lo scambio. Il nome non deve essere già in uso. Non chiamate l'immagine con lo stesso nome della DIV altrimenti il programma non funzionerà. Usualmente scrivo "Img" e ID immediatamente dopo la DIV in modo tale da evidenziare l'eventuale conflitto nei nomi.

Preloading delle Immagini

Prima di cambiare l'immagine, dovete precaricarla nella cache del browser. Questo è il codice fondamentale per farlo:

imagename = new Image();
imagename.src = "imagefilename.gif";

In questo modo creiamo un oggetto immagine. A questo punto abbiamo un oggetto mediante il quale accedere all'immagine in ogni momento. Se vogliamo scambiarla essa sarà sempre disponibile - non dovrete aspettare che venga caricata poiché a questo punto è già presente nella cache di internet. Visto che sono necessarie entrambe le immagini, imageA e imageB, dobbiamo precaricarle entrambe:

imageA = new Image();
imageA.src = "imageA.gif";
imageB = new Image();
imageB.src = "imageB.gif";

La Funzione preload()

Più sono le immagini per cui dobbiamo fare il preload, più sarà noioso riscrivere sempre le stesse due righe. Così invece di scriverne due possiamo ridurle a una soltanto usando una generica funzione preload():

function preload(imgObj,imgSrc) {
        if (document.images) {
                eval(imgObj+' = new Image()')
                eval(imgObj+'.src = "'+imgSrc+'"')
        }
}
dove: Esempi:
preload('imageA','imageA.gif')
preload('imageB','imageB.gif')

E' meglio fare il preload delle immagini mentre la pagina sta caricando, piuttosto che aspettare il caricamento totale della pagina, raccomanderei di richiamare la funzione immediatamente dopo averla definita.

Sostituire l'Immagine

Una volta caricate potrete accedere alle immagini e scambiarle. Questa operazione è leggermente differente in  Netscape rispetto a IE, così mostrerò il codice per ciascuno dei browser e quindi ne presenterò uno esplicito per tutte e due.

Se l'immagine non è inserita in un layer, questo è il modo generale per cambiare l'immagine:

document.images["imageName"].src = imageObject.src
Dove imageName è il nome che voi avete fornito nella tag IMG, e imageObject è il nome dell'immagine oggetto di cui abbiamo fatto il preload.

Così nel mio caso userò:

document.images["myImg"].src = imageB.src
Ma ricordatevi, solo se l'immagine non sta in un layer, perché in quel caso le cose cambierebbero.

In Netscape, dovete riferirvi alla DIV in cui l'immagine è inserita. Nel mio caso è nel layer imgDiv cosicché devo aggiungere document.imgDiv.document davanti al codice:

if (ns4) document.imgDiv.document.images["myImg"].src = imageB.src
Il "document" aggiunto fra il nome della DIV e l'immagine è necessario poiché Netscape tratta le DIV come un documento totalmente separato.

Ma in Internet Explorer non è necessario, vi accedete come se non fosse per niente in un layer:

if (ie4) document.images["myImg"].src = imageB.src
Eccoci. Tutto quello di cui avevate bisogno ora sarà mettere il codice in una funzione separata e richiamare la funzione quando volete cambiare l'immagine:
function changeToA() {
        if (ns4) document.imgDiv.document.images["myImg"].src = imageA.src
        if (ie4) document.images["myImg"].src = imageA.src
}

function changeToB() {
        if (ns4) document.imgDiv.document.images["myImg"].src = imageB.src
        if (ie4) document.images["myImg"].src = imageB.src
}

Osservate images1.html per un primo esempio di uso di queste due funzioni.

La Funzione changeImage()

La funzione changeImage() elimina la necessità di avere funzioni separate ogniqualvolta volete cambiare un'immagine. Dovrete solo mandarla nel layer in cui si trova, nome dell'immagine, nome dell'oggetto precaricato layer, imgName e imgObj rispettivamente:

function changeImage(layer,imgName,imgObj) {
        if (document.layers && layer!=null) eval('document.'+layer+'.document.images["'+imgName+'"].src = '+imgObj+'.src');
        else document.images[imgName].src = eval(imgObj+".src");
}

Nel mio esempio, posso rimpiazzare la funzione changeToA() semplicemente con:

changeImage('imgDiv','myImg','imageA')

La stessa cosa per imageB:

changeImage('imgDiv','myImg','imageB')

Potete vedere images2.html come esempio che utilizza la funzione changeImage().

Note:

La funzione changeImage() può anche essere usata per i layer annidati, per l'argomento layer dovete inserire parentLayer.document.childLayer similmente a come i Layer Dinamici trattano i layer annidati.

Userete questa funzione anche per quelle immagini che non sono layer, ponete solo a null l'argomento layer:

changeImage(null,'myImg','imageB')

Inoltre, la funzione changeImage() è compatibile con versioni precedenti. Se avete la pagina di un layer e l'aprite con Netscape 3, la funzione si comporterà a dovere. Potete provare a vedere tutti questi esempi con quel browser. Nessun altro browser è in grado di farlo, così se desiderate un test per la possibilità di scambiare le immagini potete usare questa versione della funzione changeImage ():

function changeImage(layer,imgName,imgObj) {
        if (document.images) {
                if (document.layers && layer!=null) eval('document.'+layer+'.document.images["'+imgName+'"].src = '+imgObj+'.src')
                else document.images[imgName].src = eval(imgObj+".src")
        }
}

Sia la changeImage() sia la preload() fanno parte del DynAPI e stanno nel file images.js:

Sorgente

Caricate: images.js
Vedere il sorgente: images.js

Mouse Rollovers

Pensavo che il tema degli scambi immagine al passaggio del mouse [rollover] fosse ormai lettera morta, infatti non mi ero preoccupato di esaminarlo in precedenza. Ad ogni modo, per soddisfare quelli tra voi che mi hanno chiesto delle delucidazioni, darò una spiegazione su come creare questo effetto utilizzando la mia changeImage().

L'idea che sta dietro i rollover è terribilmente semplice, quando portate il mouse su un'immagine essa cambia, l'immagine ritorna quella di prima quando allontanate il mouse. Per favorire questo scambio dovete inserire la tag IMG con un anchor/hyperlink e richiamare la funzione changeImage() usando gli eventi onMouseOver e onMouseOut. Questi ultimi devono essere per forza inseriti in un hyperlink poiché in Netscape la tag IMG non ha la possibilità di riconoscere questi eventi.

Ricordatevi che dovete puntare ad un link. In realtà la maggior parte di questi effetti viene usato nelle barre di navigazione ed in generale non avremo difficoltà ad immaginarli come dei mezzi per collegarci ad altre pagine. Tuttavia nel caso non lo voleste inserire potreste usare come HREF javascript:void(null). Che è un comando che non fa nulla. Continuerà ad esistere un hyperlink che in esecuzione non porta a alcuna pagina.

<DIV ID="imgDiv">
<A HREF="javascript:void(null)"
onMouseOver="changeImage('imgDiv','myImg','imageB')"
onMouseOut="changeImage('imgDiv','myImg','imageA')">
<IMG NAME="myImg" SRC="imageA.gif" WIDTH=75 HEIGHT=75 BORDER=0></A>
</DIV>

Guardate  images3.html per il rollover con il mouse.

Home Prossima Lezione: Il Taglio dei Layer 
copyright 1998 Dan Steinman