titolo.gif
Nella lezione precedente abbiamo visto il metodo per accedere
ad un’oggetto immagine con la finalità di sostituirne il contenuto
tramite il linguaggio Javascript. Infatti l’immagine caricata
con il tag IMG in HTML veniva cambiata al volo tramite l’opzione
SRC dell’Oggetto Javascript corrispondente.
L’Oggetto Javascript corrispondente può essere definito anche
Oggetto ‘riflesso’ dal linguaggio HTML. In pratica l’oggetto
immagine o anche ‘Image Object’, viene creato automaticamente,
anche se in realtà dallo sviluppatore non è stato scritto alcun
codice Javascript.
Questa operazione automatica viene effettuata dalle “Javascript
Run Time Engines”, che sono dei ‘motori’ interni
al browser che si occupano di costruire in tempo reale tutti gli
oggetti Javascript corrispondenti ad ogni TAG HTML presente in un
documento step by step.
Per quello che riguarda le immagini, supponiamo di averne a disposizione
un certo numero all’interno di in un documento, esse vengono
organizzate in un vettore di immagini. Questo significa che se abbiamo
cinque immagini verranno automaticamente immagazzinate in memoria
nel seguente modo:
document.images[0] // prima
immagine
document.images[1] // seconda immagine
document.images[2] // terza immagine
document.images[3] // quarta immagine
document.images[4] // quinta immagine
Questa modalità di accesso alle immagini è tanto utile quanto potente,
ma dovremo aspettare alcune lezioni prima di poterla verificare
insieme. In questa lezione ci occuperemo del ‘precaricamento’
delle immagini, e per utilizzare le immagini useremo la modalità
di accesso alle immagini della precedente lezione, nella quale abbiamo
anche visto l’importanza della gestione degli Eventi per creare
“Effetti Rollover” o animazioni.
Ebbene questo effetto visivo è tecnicamente più valido a vedersi
se le immagini che vogliamo sostituire sono già state caricate in
precedenza (o precaricate) dal browser.
Di cosa si tratta? Semplicemente di caricare determinate immagini
nella cache del browser in modo tale che queste vengano visualizzate
istantaneamente al posto delle prime immagini, senza nessuna attesa,
la prima volta che viene attivato l’Effetto Rollover.
Il ‘precaricamento’ è una tecnica molto importante e per
realizzarlo si utilizza l’Oggetto Image. Fate attenzione
al seguente codice:
miaImmagine = new Image()
miaImmagine.src = "altraImmagine.jpg"
Queste due righe vanno inserite nell’intestazione della pagina.
La prima riga si occupa di costruire un Oggetto Image di
nome miaImmagine, quindi possiamo dire che questa istruzione
serve per la prepararazione dello spazio in memoria al fine di contenere
una nuova immagine, così come una cornice di un quadro appena realizzata,
in futuro conterrà la sua tela.
La seconda riga, invece, si occupa di assegnare l’immagine
all’oggetto, e di conseguenza la carica in memoria (è stata
scelta la tela da mettere nel quadro).
Se quest’ultima operazione viene effettuata correttamente,
a video non dovremmo vedere alcuna scritta o immagine, il risultato
ottenuto sarà invece quello di avere a disposizione l’immagine
“altraImmagine.jpg” nella cache di memoria prima ancora
di visualizzare la pagina web.
Per fare un simpatico esempio, in questa lezione sfrutteremo il
logo (titolo.gif) della home page di SoftwarePlanet.
titolo.gif
E’ possibile modificare questa immagine ( di tipo GIF ) con
un qualsiasi programma di grafica come Photoshop, Paint Shop Pro
o altri simili.
Nel nostro caso ho aumentato (con tecnica RGB) le percentuali di
colore sull’immagine in questo modo:
RED +66%, GREEN +8%, BLUE +100%
Il risultato sarà un logo identico al precedente ma con un colore
più intenso, tendente al magenta, ed essendo più luminoso sicuramente
valido da applicare come seconda immagine di un ‘Effetto Rollover’.
titolo2.gif
Una volta a disposizione le due immagini vediamo il codice Javascript del precaricamento:
<HEAD>
<SCRIPT LANGUAGE="JavaScript1.1">
sp = new Image();
sp.src = "titolo2.gif";
window.alert("Precaricamento file avvenuto");
</SCRIPT>
</HEAD>
<BODY bgcolor="white">
<CENTER>
<a href="http://www.softwareplanet.net/Edinf/"
onmouseover="sp.src='titolo2.gif';"
onmouseout="sp.src='titolo.gif';">
<img name="sp" src="titolo.gif"
border="0"
alt="Se sei un programmatore, clicca qui !">
</a>
</CENTER>
</BODY>
Nell’intestazione è stato assegnato all’oggetto sp
il secondo file “titolo2.gif”, da applicare all’effetto
rollover.
Nel corpo, invece, viene effettuato l’effetto rollover tra
l’immagine ‘titolo.gif’ che viene caricata con il
documento e l’immagine ‘titolo2.gif’ che viene ‘precaricata’
e che è quindi già presente nella cache di memoria locale.
Nell’esempio di questa
lezione apparirà un alert in cui verrà dichiarato il precaricamento
del file ‘titolo2.gif’ nella cache di memoria.
Per visualizzare l’esempio Clicca Qui!
Nella prossima lezione ci occuperemo sempre degli oggetti Javascript,
in particolare questa volta vedremo come accedere alle variabili
input di un form.
Torna all'indice Generale del corso di Corso di JavaScript di Software Planet