Le mappe

Nel paragrafo sulle immagini è stato mostrato come creare un link ad una nuova pagina utilizzando un'immagine al posto del testo.
Le mappe consentono di dividere una figura in più parti ed associare a ciascuna di queste un link diverso.
Le immagini mappate si dividono in due categorie:

le immagini a mappa sul server
le immagini a mappa sul client

In questo paragrafo tratteremo solo le seconde, in quanto le immagini a mappa sul server sono sempre meno utilizzate e per la loro creazione deve essere utilizzato un programma funzionante sul server.

Le immagini a mappa sul client
I passi per inserire una mappa in una pagina web sono:

definire la mappa tramite il tag <MAP>
richiamarla in un tag <IMG> attraverso l'attributo USEMAP

Per definire la mappa è necessario assegnarle un nome, che verrà poi richiamato dall'attributo USEMAP, e dividere l'immagine in regioni con il tag <AREA>.
Le regioni in cui può essere divisa l'immagine possono essere: rettangolari, poligonali e circolari. Nei primi due casi devono essere specificate le coordinate in pixel dei vertici, nel secondo caso devono essere specificate le coordinate del centro e il raggio.
Ad esempio la mappa qua sotto crea due link, uno al sito dell'Università di Cagliari e l'altro a l'Home page di questo Dipartimento, servendosi di un'immagine alta 75 pixel e larga 487 pixel

( 1, 1 )

( 487, 75 )

i tag per realizzare questa mappa sono i seguenti:

<HTML>
<HEAD>
.
</HEAD>
<BODY>
<MAP NAME="dipmat">
<AREA SHAPE="rect" COORDS="0,0,487,28" HREF="http://www.unica.it">
<AREA SHAPE="rect" COORDS="0,28,487,75" HREF="http://riemann.unica.it">
</MAP>
.
.
.
.
.
.
<IMG SRC="gif/dip.gif" BORDER="0" USEMAP="#dipmat">
.
.
.
.
</BODY>
</HTML>

L'attributo SHAPE del tag <AREA> specifica il tipo di regione, i valori possibili sono:

rect per le regioni rettangolari;
poly per le regioni poligonali;
circle per le regioni circolari;

L'attributo COORDS del tag <AREA> specifica le coordinate di ciascuna regione
NB. l'origine del sistema di coordinate in pixel si trova nell'angolo in alto a sinistra dell'immagine.

per le regioni di tipo rect devono essere specificate le coordinate dello spigolo in alto a sinistra e di quello in basso a destra;
per le regioni di tipo poly devono essere specificate le coordinate di tutti i vertici;
per le regioni di tipo circle devono essere specificate le coordinate del centro e il raggio del cerchio.

Quando si richiama la mappa con l'attributo USEMAP="#nome_mappa" il simbolo "#" precede il nome della mappa per indicare al browser che deve cercare la definizione della stessa all'interno del documento.
Le mappe molto complesse o le mappe che vengono utilizzate in più pagine possono essere definite in un file HTML a parte che verrà richiamato specificandone l'indirizzo URL nell'attributo USEMAP.