Le mappe cliccabili

Guida ad Html
di Risorse.net

Riprendiamo il discorso delle immagini iniziato nella scorsa puntata e vediamo come creare mappe cliccabili grazie all'ausilio di Html.

Prima di cominciare, vorremmo sottolineare l'esistenza di due tipi di mappe: lato client e lato server. Quest'ultime funzionano interagendo in modo simile a quelle lato client (che tratteremo in questa puntata): cliccando su una regione attiva dell'immagine, verranno inviate al server le coordinate che restituirà un documento oppure eseguirà uno script.

Esaminiamo ora le mappe lato client.
Le immagini cliccabili suddivise in regioni vengono chiamate "image map". Ogni parte cliccabile viene chiamata "hot spot". Per definire una mappa si utilizza il seguente schema:

<MAP NAME="nome">
<AREA SHAPE="
forma" COORDS="x,y,z..." HREF="link" TITLE="testo">
</MAP>
<IMG SRC="
immagine" USEMAP="#nome" BORDER=0>

Vediamo di esaminare i tags e gli attributi usati per realizzare una mappa:

NAME="nome"
Identifica il nome da dare alla mappa in modo da essere richiamato all'interno del tag <IMG> e più precisamente nell'attributo USEMAP.

SHAPE="rect/oval/circle/point"
Stabilisce la forma da dare a una regione cliccabile all'interno dell'immagine. I possibili attributi sono:
rect: di default. Disegna un rettangolo. Le coordinate da specificare sono due coppie: il punto in alto a destra e quello in basso a sinistra.
oval: disegna un ovale. Le coordinate da specificare sono due coppie: il punto in alto a destra e quello in basso a sinistra del rettangolo che racchiude la figura.
circle: disegna un cerchio. Le coordinate da specificare sono due coppie: il centro e un punto qualsiasi della circonferenza.
point: una coppia di punti.

HREF=link
Imposta un collegamento ipertestuale a cui deve portare una determinata regione dell'immagine.

TITLE="testo"
Equiparabile all'attributo ALT per le immagini. Definisce quindi un alternate text per la zona delimitata dall'attributo SHAPE. Questo attributo è compatibile solo con Ms Ie.

Adesso che abbiamo esaminato il codice di una mappa, vediamo di mettere alla prova ciò che abbiamo imparato creando proprio un esempio ad hoc. Per vederlo, fai click qui.

© Risorse.net (www.risorse.net)
pagina in versione stampabile:
http://www.risorse.net /html/mappe.asp?print=ok