Immagini e creazione di mappe

Immagini e creazione di mappe

Le immagini e in generale la grafica rappresentano una parte importante nella costruzione di un sito web.
Sul web le immagini sono generalmente create con questi formati: GIF, PGN, JPEG.
In una pagina HTML un'immagine è reperita come risorsa e poi visualizzata grazie al tag <img>, per il quale si possono definire i seguenti attributi:

• src: che indica l'URL dove reperire l'immagine;


• alt: che indica un testo alternativo (alternative text) che viene mostrato nel caso in cui un'immagine, per qualsiasi ragione, non è più visualizzabile;


• width e height: indicano rispettivamente la lunghezza e l'altezza (in pixel) dell'immagine;


• usemap: indica il riferimento a un elemento di tipo mappa, espresso attraverso il tag <map>, utile per definire un'area geometrica all'interno di un'immagine che può essere utilizzata come link.

Nel codice qui sopra viene mostrata un'immagine di Dante Allighieri con in mano la Divina Commedia i cui contorni sono stati disegnati con un poligono trasformandola in un link verso una pagina Wikipedia dedicata al poema.
Nel codice, oltre al tag <img>, notiamo anche:

• l'utilizzo dell'attributo title che consente di far visualizzare, quando si posiziona il mouse sopra l'immagine, una sorta di tooltip;


• l'utilizzo del tag <map>, con cui definiamo una mappa dove impostiamo l'attributo name che ne indica il nome che viene riferito dalla relativa immagine mediante l'attributo usemap nel tag <img> preceduto dal carattere di hash &#35;;


• l'utilizzo, all'interno del tag <map>, del tag <area>, con cui definiamo l'area geometrica all'interno dell'immagine che verrà utilizzata come collegamento ipertestuale (link). Tali aree sono definite dagli attributi shape, che determinano la tipologia dell'area tra: rettangolare (rect o rectangle), circolare (circ o circle) o poligonale (poly o polygon). Troviamo inoltre l'attributo coords che permette di impostare le coordinate dell'area.

L'HTML consente di utilizzare il tag <figure> per annotare illustrazioni, diagrammi, foto, listati di codice ecc, e il tag <figcaption> per attribuire una didascalia all'elemento annotato. I due tag citati consentono di dare un significato strutturale e di relazione tra l'immagine e una sua etichetta descrittiva in modo che essi siano, nel contenuto principale del documento HTML, un'entità indipendente.
Il tag <figure>è utilizzato unitamente al tag <map>, di cui si fornisce la relativa descrizione mediante il tag <figcaption>.