Le immagini cosa sarebbe una pagina web senza immagini ? Impossibile anche solo immaginarlo. Questo elemento è di primaria importanza insieme all'elemento ancora. Gestisce tutto il contenuto grafico dell'intero documento. I formati supportati sono diversi a seconda del browser, diciamo che gif e jpg sono quelli riconosciuti maggiormente si parla spesso anche di png ma al momento non credo sia il caso di approfondire.

<IMG...>

L'elemento <IMG> necessita di attributi di cui uno necessariamente obbligatorio: SRC, non ha bisogno di essere concluso dallo stesso tag preceduto dalla barra retroversa. vediamo questi attributi:

ALIGN

L'attributo align permette di specificare l'allineamento dell'immagine rispetto alla riga di testo successiva, i valori accettati sono : left, right, top, texttop, middle, absmiddle, baseline, bottom e absbottom. I due valori left e right fanno si che l'immagine diventi di tipo flottante, vediamoli:

ALIGN=left Allinea l'immagine sul bordo sinistro della finestra di visualizzazione del browser, il testo che segue circonda la parte destra dell'immagine.

Allinemaneto di tipo left il contorno immagine e stato riempito volutamente per meglio risaltare questo tipo di allineamento.Provate a variare le dimensioni della finestra del browser per meglio capire l'allineamento.

ALIGN=right Allinea l'immagine sul bordo destro della finestra di visualizzazione del browser, il testo che segue circonda la parte sinistra dell'immagine.

Allinemaneto di tipo right il contorno immagine e stato riempito volutamente per meglio risaltare questo tipo di allineamento. Provate a variare le dimensioni della finestra del browser per meglio capire l'allineamento.

ALIGN=top Allinea il testo che segue l'immagine con la parte superiore dell'elemento più alto nella riga.

Allinemaneto di tipo top il contorno immagine e stato riempito volutamente per meglio risaltare questo tipo di allineamento. Provate a variare le dimensioni della finestra del browser per meglio capire l'allineamento.

ALIGN=texttop Allinea il testo che segue l'immagine con la parte superiore del testo più alto nella riga.

Allinemaneto di tipo texttop il contorno immagine e stato riempito volutamente per meglio risaltare questo tipo di allineamento. Provate a variare le dimensioni della finestra del browser per meglio capire l'allineamento.

ALIGN=middle Allinea la linea di base della riga corrente con la parte centrale dell'immagine.

Allinemaneto di tipo middle il contorno immagine e stato riempito volutamente per meglio risaltare questo tipo di allineamento. Provate a variare le dimensioni della finestra del browser per meglio capire l'allineamento.

ALIGN=absmiddle Allinea la parte centrale della riga corrente con la parte centrale dell'immagine.

Allinemaneto di tipo absbmiddle il contorno immagine e stato riempito volutamente per meglio risaltare questo tipo di allineamento. Provate a variare le dimensioni della finestra del browser per meglio capire l'allineamento.

ALIGN=baseline Allinea la parte inferiore dell'immagine con la linea di base della riga corrente.

Allinemaneto di tipo baseline il contorno immagine e stato riempito volutamente per meglio risaltare questo tipo di allineamento. Provate a variare le dimensioni della finestra del browser per meglio capire l'allineamento.

ALIGN=bottom Allinea il testo che segue l'immagine con la parte inferiore dell'elemento più basso nella riga.

Allinemaneto di tipo bottom il contorno immagine e stato riempito volutamente per meglio risaltare questo tipo di allineamento. Provate a variare le dimensioni della finestra del browser per meglio capire l'allineamento.

ALIGN=absbotton Allinea la parte inferiore dell'immagine con la parte inferiore della riga corrente.

Allinemaneto di tipo absbottom il contorno immagine e stato riempito volutamente per meglio risaltare questo tipo di allineamento. Provate a variare le dimensioni della finestra del browser per meglio capire l'allineamento.

Alcuni attributi sembrano gli stessi di altri, è vero, molto dipenmde dal tipo di browser dalle dimensioni della finestra e altro ancora, l'importante era avere un'idea , ognuno poi adopererà quello che riterrà piu' adatto al momento.

ALT

L'attributo alt ovvero alternativa alla grafica, permette di specificare un testo per quei browser non grafici. Viene spesso adoperato per descrivere l'immagine o per qualsiasi altro motivo che necessita di avere una descrizione, il testo nel caso in cui sia visualizzata l'immagine appare nel momento in cui si passa sopra l'immagine stessa col cursore del mouse.

Questo il codice: <img src="tarta.jpg" alt="Ciao sono una tartaruga"> Provate a posizionare il mouse sull'immagine e potrete così leggere il testo immesso con l'attributo ALT.

BORDER

L'attributo border=numero permette di specificare lo spessore del bordo. Molto utile impostare border=0 quando l'immagine fa parte di un collegamento ancora e non si vuole quel bordino azzurro di default per le immagini facenti parte di un link.

Questo il codice: <img src="tarta.jpg" border="3"> Si noti lo spessore del bordo dell'immagine che in questo caso è stato impostato di spessore 3.

ISMAP

L'attributo ISMAP (is map) ovvero è una mappa, può essere adoperato in modo corretto solo se il server HTTP ha installato un tipo di software, l'ho citato solo per completezza, non credo serva molto visto che per le immagini mappate si adopera ormai USEMAP che funziona sul lato client.

LOWSRC

L'attributo lowsrc non supportato da tutti i browser permette di adoperare due immagini nello stesso spazio, quella definita con LOWSRC sarà caricata subito, di solito si tratta di una immagine a bassa risoluzione in alcuni casi anche in bianco e nero, intrattiene il visitatore fino a caricamento pagina ultimato dopodichè sarà automaticamente sostituita con l'immagine definita con SRC.

Questa la sintassi: <img src="tarta.jpg" lowsrc="tartabn.jpg"> I browser che non supportano questo attributo visualizzeranno la sola immagine dichiarata in SRC.

SRC

L'attributo src è indispensabile per l'elemento IMG senza di questo non funzionerebbero nessuno degli altri. Permette di specificare il nome dell'immagine da visualizzare se questa si trova nella stessa dir in cui è presente la pagina che la richiama oppure accetta percorsi fatti da directory e sottodirectory ed anche di URL compoleti. il tag img src può essere adoperato all'interno del tag ancora per essere cliccato come un normale testo che faccia da link.

Questa la sintassi: <img src="nome_immagine.jpg"> o anche <img src="http://www.freeweb.org/internet/ab/abnome_immagine.jpg">

VSPACE e HSPACE

L'attributo VSPACE così come l'attributo HSPACE vengono adoperati nelle immagini flottanti cioè quelle immagini allineate con left e right, servono ad impostare rispettivamente degli spazi verticali e orizzontali fra il testo e l'immagine stessa o fra l'immagine e la cornice. Un esempio chiarirà meglio:.

Questa la sintassi: <img src="tarta.jpg" hspace="50"> ho impostato uno spazio orizzontale di 50 pixel.

Questa la sintassi: <img src="tarta.jpg" vspace="50"> ho impostato uno spazio verticale di 50 pixel.

Questa la sintassi: <img src="tarta.jpg" hspace="50" vspace="50"> ho impostato uno spazio orizzontale ed uno spazio verticale entrambi di 50 pixel.

WIDTH e HEIGHT

L'attributo WIDTH così come l'attributo HEIGHT vengono adoperati per specificare le dimensioni orizzontale e verticale dell'immagine se omessi il browser impiegherà più tempo per calcolare l'area sulla quale disporre enventuale testo, convine dunque impostare sempre questi valori.

Questa la sintassi: <img src="tarta.jpg" width="114" height="75"> ho impostato le dimensioni orizzontali e verticali dell'immagine.

potrei decidere di stirare l'immagine assegnado valori diversi come in questo caso: <img src="tarta.jpg" width="60" height="35"> ho impostato le dimensioni orizzontali a 60 px e verticali a 45 px.

O arrivare anche a defromare l'immagine assegnado valori sproporzionati come in questo caso: <img src="tarta.jpg" width="35" height="60"> ho impostato le dimensioni orizzontali a 50 px e verticali a 100 px.

USEMAP

L'attributo USEMAP viene adoperato per indicare che l'immagine è una mappa d'immagini sul lato client. Cosa significa mappa di immagini ? E' possibile suddividere una immagine in diverse aree tipo mappa, da qui appinto il nome, ed associare ad ognuna di quete aree la possibilità di richiamare un link diverso. In pratica la stessa immagine usata come link è in grado di richiamare links diversi a seconda del punto in cui viene cliccata. Se l'argomento USEMAP inizia con un simbolo # si assume che la descrizione della mappa si trovi nello stesso documento in cui si trova il tag IMG è infatti possibile avere la definizione della mappa anche su un file di testo separato

Le aree attive dell'immagine vengono descritte adoperando i tags MAP e AREA  

<MAP>...<MAP>

L'elemento MAP descrive ciascuna delle aree dell'immagine a cui è stata assegnata una mappa ed indica la posizione del documento da scaricare quando viene attivata l'area definita .

dove:
nome specifica il nome della mappa in modo che USEMAP possa fare riferimento ad essa.
forma fornisce la forma dell'area specificata es. RECT per rettangolo.
Nel caso si omettesse l'attributo SHAPE viene assunto SHAPE="RECT" per default, le altre forme sono circle e poly.
L'attributo COORDS fornisce le coordinarte nella forma utilizzando pixel dell'immagine come unità. Per un rettangolo le coordinate vengono fornite - sinistro, alto, destro, basso - L'area rettangolare definita comprende l'angolo inferiore destro specificato , se per esempio si volesse specificare l'intera area di una immagine 100 x 100 pixel le coordinate saranno:"0,0,99,99"
HREF richiama il link ad esso associato NOHREF indica che eventuali clic in questa zona non richiameranno alcun link.

<AREA>

L'elemento AREA specifica le diverse aree, nel casoin cui due aree si intersecano quella che appare per prima nella definizione avrà prevalenza.

Provate a cliccare sulla testa o sul guscio della tartaruga, per andare rispettivamente ad inzio o fine di questo documento.

Non so bene se funzioni con tutti i browser alcuni infatti supportano solo RECT e non circle e poly, tutto questo serve solo per capire ed avere idee più chiare, infatti per realizzarlo dal punto di vista pratico credo nessuno o in pochi lo facciano, esistono infatti editors HTML o programmi appositi in grado di generare automaticamente codice per mappe cliccabili, sarà sufficiente tracciare le aree da cliccare sull'immagine per ottenere il relativo codice..

Andrea Bianchi

Puoi lasciarmi un msg, un suggerimento, una critica.

© Andrea Bianchi 1997-1998-1999-2000