Il sito per imparare gratuitamente a fare pagine Web

Guida HTML

Questa guida Ŕ stampabile in modo agevole dalla versione off-line scaricabile dal men¨ laterale: Download.zip
 


Le Immagini grafiche


Elementi o Tags:
Attributi:
© www.web-link.it  Guida HTML 4.01 - Ver. 7.0.1  
 

Le immagini Cosa sarebbe una pagina web senza immagini?
Impossibile anche solo pensarlo. Questo elemento è senza alcun dubbio di primaria importanza. I formati supportati dal www sono diversi e variano a seconda del browser adoperato, diciamo che .gif .jpg e .png sono quelli riconosciuti ufficialmente da tutti i browser e non si dovrebbero usare formati diversi da questi.

<img>

L'elemento <img> serve per richiamare una immagine grafica, da solo non serve a nulla, necessita di diversi attributi di cui almeno uno necessariamente obbligatorio: src. Questo tag non necessita del relativo tag di chiusura.

<img>

Molti gli attributi associabili a questo tag:

align, alt, border, height, hspace, src, title, usemap, vspace, width

Si inseriscono lasciando uno spazio vuoto fra la scritta img e la sua chiusura  > 
Gli attributi possono essere più di uno e specificati uno di seguito all'altro.

Il tag <img può essere adoperato anche all'interno del tag <a href> (ancora o link) e potrà cosý essere cliccato come un normale link formato da testo.



Torna su
 

src

L'attributo src (source) è indispensabile per l'elemento img, senza questo non funzionerebbero neppure tutti gli altri. Permette di specificare il nome dell'immagine completo della sua estensione da visualizzare quando questa si trovasse nella stessa cartella in cui è presente la pagina web che la richiama. E' possibile specificare anche percorsi (path) fatti da cartelle (directory) e/o sottocartelle (subdirectory) compresi gli URL assoluti richiamanti l'immagine da altri siti.

<img src="nome_immagine.jpg">
<img src="nome_cartella/nome_immagine.jpg">
<img src="http://www.nome_sito.it/nome_immagine.jpg">


Torna su
 

align

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

<img src="tarta.jpg" align="left"> testo ...........

Allineamento di tipo left, il contorno immagine e stato riempito volutamente di colore rosa per meglio risaltare questo tipo di allineamento. L'immagine infatti comprende anche eventuali zone trasparenti.

<img src="tarta.jpg" align="right"> testo ...........

Allineamento di tipo right il contorno immagine e stato riempito volutamente di colore rosa per meglio risaltare questo tipo di allineamento. L'immagine infatti comprende anche eventuali zone trasparenti.

Consiglio: meglio usare una dichiarazione di style, in linea o su foglio esterno creando una classe o un identificatore e richiamare questo dal tag img usando la proprietÓ float:

img { float: left; }

valori per float sono: left, right, none, inherit.



<img src="tarta.jpg" align="top"> testo ...........
Allinea il testo che segue l'immagine con la parte superiore dell'elemento più alto nella riga.
<img src="tarta.jpg" align="middle"> testo ...........
Allinea la linea di base della riga corrente con la parte centrale dell'immagine.
<img src="tarta.jpg" align="bottom"> testo ...........
Allinea il testo che segue l'immagine con la parte inferiore dell'elemento più basso nella riga di testo.

Il contorno immagine e stato riempito volutamente di colore rosa per meglio risaltare il tipo di allineamento. L'immagine infatti comprende anche eventuali zone trasparenti.

Alcuni attributi sembrano gli stessi di altri, è vero, ma ognuno svolge una funzione differente. L'importante Ŕ farsi un'idea di cosa succede, ognuno di noi poi adopererà quello che riterrà più adatto alle proprie esigenze.

Consiglio: meglio usare una dichiarazione di style, in linea o su foglio esterno creando una classe o un identificatore e richiamare questo dal tag img usando la proprietÓ vertical-align:

img { vertical-align: top; }

valori per vertical-align sono: baseline, middle, top, super, sub, text-top, bottom e text-bottom



Torna su
 

alt

L'attributo alt (alternativa alla grafica), permette di specificare un testo per quei browser non grafici o nel caso in cui l'immagine non fosse presente da dove viene richiamata. Si adoperata per descrivere l'immagine e non va confuso con title spiegato sotto anche se il browser IE lo gestisce come title. Il testo apparirà soltanto nel caso in cui l'immagine non fosse presente o non venisse caricata, per questo motivo l'attributo alt diventa obbligatorio ai fini di una validazione del W3C.

<img src="nome_immagine.jpg" alt="Qquesta Ŕ una tartaruga">

tartarugaHo volutamente tolto l'immagine e come potete vedere al suo posto c'Ŕ il testo alternativo immesso con l'attributo alt.



Torna su
 

title

L'attributo title (titolo), permette di specificare un testo che descriva l'immagine, il testo Ŕ visibile nel momento in cui si porta il cursore del mouse sull'immagine. Per certi versi potrebbe sembrare simile ad alt visto sopra ma a differenza viene mostrato sempre e non solo nel caso in cui mancasse l'immagine.

<img src="tarta.jpg" title="Ciao sono una tartaruga">

tartarugaProvate a posizionare il cursore del mouse sull'immagine, sarà possibile leggere il testo immesso con l'attributo title.



Torna su
 

border

L'attributo border permette di specificare lo spessore del bordo intorno all'immagine. Risulta utile impostare border="0" quando l'immagine fa parte di un collegamento (link o ancora) e non si vuole visualizzare quel bordino azzurro di default tipico delle immagini facenti parte di un link.

<img src="tarta.jpg" border="3">

Si noti il bordo dell'immagine che Ŕ piuttosto spesso Si noti lo spessore del bordo dell'immagine che in questo caso è stato impostato come spessore 3.



Consiglio: meglio usare una dichiarazione di style, in linea o su foglio esterno creando una classe o un identificatore e richiamare questo dal tag img usando la proprietÓ border:

img { border: 3px solid #ff0000; }

Per non avere un bordo sulle immagini link si usa border: none. E' possibile specificare il tipo di bordo, per esempio solid o anche il colore, per esempio #ff0000.



Torna su
 

vspace hspace

Gli attributi vspace e hspace vengono adoperati nelle immagini flottanti, cioè quelle immagini allineate con left e right e servono ad impostare rispettivamente degli spazi verticali ed orizzontali (vertical space ed horizontal space) fra il testo e l'immagine stessa, ed anche fra l'immagine e la sua cornice. Un esempio chiarirà sicuramente meglio:.

<img src="tarta.jpg" hspace="25">

Ho impostato uno spazio orizzontale di 25 pixel. Ripeto il testo per evidenziare lo spazio che rimane fra l'immagine ed il suo contenitore e l'immagine ed il suo testo. ho impostato uno spazio orizzontale di 25 pixel. Ripeto il testo per evidenziare lo spazio che rimane fra l'immagine ed il suo contenitore e l'immagine ed il suo testo.


<img src="tarta.jpg" vspace="25">

Ho impostato uno spazio verticale di 25 pixel. Ripeto il testo per evidenziare lo spazio che rimane fra l'immagine ed il suo contenitore e l'immagine ed il suo testo. ho impostato uno spazio verticale di 25 pixel. Ripeto il testo per evidenziare lo spazio che rimane fra l'immagine ed il suo contenitore e l'immagine ed il suo testo.


<img src="tarta.jpg" hspace="25" vspace="25">

Ho impostato uno spazio orizzontale ed uno spazio verticale entrambi di 25 pixel. Ripeto il testo per evidenziare lo spazio anche in verticale: ho impostato uno spazio orizzontale ed uno spazio verticale entrambi di 25 pixel. Ripeto il testo per evidenziare lo spazio anche in verticale: ho impostato uno spazio orizzontale ed uno spazio verticale entrambi di 25 pixel. Ripeto il testo per evidenziare lo spazio anche in verticale



Deprecato, meglio usare una dichiarazione di style, in linea o su foglio esterno usando la proprietÓ float insieme a quella padding:

{ float: left; padding: 25px 10px 35px 5px;}

Avendo il pieno controllo sui quattro lati in modo indipendente grazie alla proprietÓ padding



Torna su
 

width height

Gli attributi width e height vengono adoperati per specificare le dimensioni orizzontali e verticali delle immagini; se omessi il browser impiegherà più tempo per calcolare l'area sulla quale disporre eventuale testo in attesa del caricamento immagine. Per questo ed altri motivi conviene impostare sempre questi valori, visto poi che sono noti a priori. Si possono impostare anche valori diversi da quelli reali nel caso in cui si volesse adattare l'immagine a certe dimensioni, comprese eventuali distorsioni.

<img src="tarta.jpg" width="114" height="75">

ho impostato le dimensioni orizzontali e verticali dell'immagine rispettivamente a 114 e 75 pixel che sono quelle sue originali.

<img src="tarta.jpg" width="60" height="35">

Potrei decidere di modificare l'immagine assegnando valori diversi da quelli reali, come in questo caso dove ho impostato le dimensioni orizzontali a 60 px e verticali a 45 px per mantenere le proporzioni.

<img src="tarta.jpg" width="50" height="100">

Potrei deformare l'immagine assegnando valori sproporzionati, come in questo caso dove ho impostato dimensioni orizzontali 50 px e verticali 100 px.

Evitate di usare immagini giganti da rimpicciolire poi facendo uso di width height, questi due attributi devono riportare le misure esatte e non quelle che noi avremo voluto. Se vi servono immagini ridotte o ingrandite, adoperate un programma di grafica.

Consiglio, Ŕ preferibile usare questi attributi all'interno dei fogli di style.

{ width: 114px; height: 75px; }

Con i CSS Ŕ possibile esprimere le dimensioni anche in em o in percentuale



Torna su
 

usemap

L'attributo usemap viene adoperato per indicare che l'immagine è una mappa d'immagine lato client. Cosa significa mappa di immagini? E' possibile suddividere un'immagine in diverse aree tipo una mappa, da qui appunto il nome. Associare ad ognuna di queste aree la possibilità di richiamare un link diverso. In pratica la stessa immagine usata come link è in grado di richiamare pi¨ 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; Risulta possibile avere la definizione della mappa anche su un file di testo separato, in questo caso il suo nome deve precedere # come da secondo esempio.

<img src="tarta.jpg" usemap="#tartaruga">

<img src="tarta.jpg" usemap="map.htm#mappa">

Nell'esempio il codice utilizza la mappa descritta come mappa1 in map.htm, per il file di immagine tarta.jpg

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. Questo tag necessita del relativo tag di chiusura </map>

<map name="nome">
<area [shape="forma"] coords="x,y,..." [href="riferimento"] [nohref] >
</map>

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 per default shape="rect", le altre forme sono circle e poly.
L'attributo coords fornisce le coordinate della 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 sarebbero:"0,0,99,99"
href richiama il link ad esso associato mentre nohref indica che eventuali click fatti in questa zona dell'immagine non richiameranno alcun link.

 

<area>

l'elemento area specifica le diverse aree dell'immagine, nel caso in cui due aree si intersecano quella che appare per prima nella definizione avrà prevalenza. Questo tag non necessita del relativo tag di chiusura.

Vediamo un esempio completo per riassumere il tutto:

<map name="tartaruga">
<area shape="circle" coords="57,65,14" href="interno.htm">
<area shape="rect"coords="13,2,99,37" href="guscio.htm">
</map>
<img src="../img/tarta.jpg" usemap="#tartaruga">

Provate a cliccare sull'interno degli occhi o sul guscio della tartaruga, due zone mappate diversamente per andare rispettivamente ad inizio e a fine di questa pagina.

interno occhi guscio tartaruga

Consiglio: Non so bene se funzioni con tutti i browser, alcuni infatti supportano solo rect e non circle e poly. Questa spiegazione ha il solo scopo di illustrare il funzionamento di una immagine suddivisa in mappa. Per la sua realizzazione nessuno ricorre ai comandi manuali. Programmi in grado di generare mappe da un'immagine ce ne sono moltissimi. Esistono anche editors HTML in grado di generare automaticamente codice per mappe cliccabili, sarà sufficiente tracciare le aree da cliccare allo stesso modo di come si disegna con un programma di grafica.



Torna su
 

Se avete domande potete scrivere sul forum di supporto, gratuito e aperto a tutti.

forum


Andrea Bianchi