7 - Le mappe cliccabili

Una delle possibilità offerte dal linguaggio HTML è quella di poter inserire nelle proprie pagine delle immagini "cliccabili", ovvero delle immagini che si comportano come se fossero dei link ma che puntano a diversi documenti a seconda della zona interessata dal click del mouse.
Generalmente vengono utilizzati due differenti tipi di mappe:

In questo corso ci occuperemo esclusivamente di queste ultime.
Il tag che definisce esattamente un'area cliccabile all'interno di un'immagine è <MAP>...</MAP>, cui viene associato un nome tramite il parametro NAME="nome_mappa", che deve corrispondere al nome utilizzato nel parametro USEMAP="#nome_mappa" del tag di definizione dell'immagine. Questo e' necessario per evitare conflitti nel caso ci dovessero essere piu' mappe cliccabili in una stessa pagina.
Il codice necessario alla creazione di una mappa cliccabile è dunque molto semplice, e lo riassumiamo di seguito:

<MAP NAME="nome_mappa">
<AREA ... vedremo in seguito come suddividere le differenti aree dell'immagine...
</MAP>
<IMG SRC="mappa.gif" USEMAP="#nome_mappa">

Come potete notare non c'è assolutamente nulla di complicato. L'unica attenzione deve focalizzarsi sulla corrispondenza fra i nomi assegnati ai parametri NAME e USEMAP.

Vediamo ora come viene materialmente suddivisa un'immagine in piu' aree cliccabili. Il tag da utilizzare è <AREA> che, come già accennato nella pagina precedente, dev'essere contenuto all'interno del tag <MAP>...</MAP>
Il tag <AREA> ammette alcuni parametri che consentono di definire univocamente una ben precisa area di un'immagine. Nella tabella che segue troverete una descrizione completa di tutte le opzioni possibili.

ParametroDescrizione
SHAPE="forma"
Definisce la forma geometrica dell'area che si sta definendo. In particolare, i valori ammissibili sono:
  • RECT - definisce una superficie di forma rettangolare.
  • CIRCLE - definisce una superficie di forma circolare.
  • POLY - definisce una superficie di forma irregolare costituita da una successione di segmenti comunque orientati.
>
COORDS="x0,y0,x1,y1,..."
Specifica le coordinate dei punti estremi della superficie definita. Si noti che i punti si riferiscono all'immagine e non alla finestra del browser, con il punto in alto a sinistra definito dalle coordinate (0,0). Il formato da utilizzare cambia a seconda della forma della superficie definita. In particolare:
  • RECT: x0,y0,x1,y1 - punto in alto a sinistra (x0,y0) seguito dal punto in basso a destra (x1,y1)
  • CIRCLE: x0,y0,raggio - punto centrale (x0,y0) seguito dal raggio della circonferenza
  • POLY: x0,y0,x1,y1,x2,y2,... - coppia di coordinate (x,y) indicanti i punti estremi della poligonale chiusa.
HREF="url"
Indica la URL della pagina HTML che verrà visualizzata nel caso che il click del mouse avvenga sulla superficie cui si riferisce l'istruzione <AREA>
NOHREF
Parametro alternativo a HREF. Definisce un'azione nulla nel caso che il click del mouse avvenga sulla superficie cui si riferisce l'istruzione <AREA>. Per azione nulla, s'intende che non verrà visualizzata alcuna nuova pagina.
TARGET="frame"
In caso di visualizzazione della mappa cliccabile all'interno di un frame, questo parametro consente di specificare in quale frame visualizzare la pagina specificata dal parametro HREF


Vediamo un esempio pratico d'immagine cliccabile, in maniera tale utilizzare tutti i tags ed i parametri analizzati finora.
A parte le considerazioni sull'estetica abbastanza penosa dell'immagine, potete chiaramente vedere delle figure geometriche che suddividono l'immagine in più parti. Provando a cliccare suille singole zone, avrete un'idea più precisa di cosa s'intenda per mappa cliccabile.



Il codice HTML necessario è presentato di seguito e credo che non abbia bisogno di ulteriori commenti.
<MAP NAME="mappa">
<AREA SHAPE="RECT" COORDS="0,0,250,50" HREF="cap1.htm">
<AREA SHAPE="RECT" COORDS="250,0,349,50" HREF="cap2.htm">
<AREA SHAPE="RECT" COORDS="250,50,349,349" HREF="cap3.htm">
<AREA SHAPE="POLY" COORDS="40,180,150,125,120,220,180,325" HREF="cap4.htm">
<AREA SHAPE="CIRCLE" COORDS="110,90,10" HREF="cap5.htm">
</MAP>

<IMG SRC="mappa.gif" USEMAP="#mappa" BORDER=0>
Prima di concludere, è doveroso un breve accenno al fatto che esistono numerose e comodissime utility che consentono di caricare un'immagine e suddividerla visivamente in più parti, generando automaticamente il codice HTML necessario.