L'oggetto Image

Argomenti trattati: le principali proprietà dell'oggetto Image.

Per introdurre l'oggetto image, verrà utilizzato un semplice esempio, di cui sotto viene riportato il codice HTML:

L'oggetto image rappresenta quindi l'immagine rispetto al tag <IMG>, e possiede le seguenti proprietà:

possiede un bordo (border);
ha un indirizzo (src);
è caratterizzata da una certa altezza e da una certa larghezza (width e height);
mantiene rispetto al testo una certa spaziatura orizzontale e verticale (hspace, vspace);
è possibile proporre un'immagine alternativa, a bassa risoluzione (lowsrc), che sarà caricata al posto di quella descritta nel caso in cui risulti eccessivamente lento il caricamento della pagina.

Inoltre, l'immagine collega ad una certa pagina, essendo racchiuso il tag <IMG> tra i tag <A></A>, in questo caso sempre la stessa, perché non è nostra intenzione visitare davvero un'altro documento, quanto ricordare come spesso le immagini vengano proposte come alternativa ai link testuali.

Un immagine in JavaScript è rappresentata dall'oggetto Image, che può così essere definito:

var myImage=new Image([ width,] [ height]);

Riferendosi alle immagini nel documento può essere utilizzato l'Array predefinito
document.images[n];

che nel caso della stella corrisponderebbe a:
document.images[0];

oppure a:
document.images['stella'];

in quanto il tag <IMG> permette di specificare un nome attraverso la proprietà name.

L'oggetto Image verrà usato principalmente negli script per ottimizzare il caricamento delle immagini o per modificarle dinamicamente, l'Array document.images[] per richiamare le immagini inserite nella pagina HTML.

Proprietà
border	proprietà in sola lettura che restituisce la larghezza del bordo dell'immagine, se questa rappresenta un link
complete	proprietà che restituisce true se il caricamento dell'immagine è stato completato, false viceversa.
height	proprietà in sola lettura che restituisce l'altezza dell'immagine
hspace	proprietà in sola lettura che restituisce la spaziatura orizzontale dell'immagine
lowsrc	proprietà src di un'immagine alternativa a bassa risoluzione
name	"nome" dell'immagine
src	proprietà src dell'immagine
vspace	proprietà in sola lettura che restituisce la spaziatura verticale dell'immagine
width	proprietà in sola lettura che restituisce la larghezza dell'immagine

Alcune proprietà modificabili dinamicamente per MSIE non lo sono per Netscape Navigator se non dopo aver ricaricato la pagina.

Ad esempio è possibile caricare un'altra immagine:

Saranno illustrati un pulsante che cambia secondo gli eventi del mouse, con effetti di roll-over, e un'immagine che cambia simulando in modo estremamente semplificato un banner pubblicitario.

Effetti sui pulsanti | Utilizzare un temporizzatore

Eventi principali supportati da MSIE:

Per un breve sommario sugli eventi per Nestcape Navigator, controllare il documento di riferimento.

Torna all'inizio | Home