Gdesign.it :: Come progettare siti web accessibili ed efficaci ::


Home » How To » Mappe grafiche

Mappe grafiche

di GDesign, 12 Luglio 2002

Versione StampabileDownload in pdf


Grazie ad appositi tag Html possiamo associare molteplici collegamenti a differenti zone di un'unica immagine; un'immagine di questo tipo viene definita mappa grafica. Molto spesso le mappe grafiche vengono utilizzate per realizzare i menù di navigazione dei siti web. Consideriamo l'immagine:
Immagine da mappare

Per fare in modo che ogni voce di questa immagine sia cliccabile possiamo procedere in due modi:

  1. spezzare l'immagine in tante immagini separate per poi riunirle all'interno di una tabella;
  2. usare le mappe grafiche.

Utilizzare le mappe grafiche è la soluzione preferibile e risulta anche elegante sul piano estetico rispetto all'impiego di tante singole immagini slegate tra loro. Inoltre, a seconda della forma dell'immagine e delle sue aree cliccabili può risultare quasi impossibile ottenere un buon risultato utilizzando tante immagini separate.

Esistono due tipi di mappe grafiche:dal lato client e dal lato server. Una mappa grafica dal lato client contiene tutte le informazioni sulla mappa grafica ed è memorizzata all'interno del documento Html. Questo tipo di mappa viene interpretata dal browser e funziona con Microsoft Internet Explorer a partire dalla versione 3.0 e con Netscape Navigator a partire dalla versione 2.0. Una mappa grafica dal lato server ha le stesse informazioni di quella dal lato client ma in un formato leggermente diverso. Viene memorizzata in un "file di definizione della mappa" nel server e vi si accede tramite il software del server o un programma CGI separato. Questo tipo di mappa funziona con tutti i browser ma è più complessa da impostare perché per poterla utilizzare è necessario sapere come è configurato il server. Le mappe grafiche dal lato client sono più facili da impostare e quindi sono anche quelle preferite dalla maggior parte di coloro che realizzano siti e pagine web. Per i suddetti motivi, in questo articolo prenderemo in considerazione le mappe grafiche dal lato client.

Per costruire una mappa grafica occorre per prima cosa inserire nella pagina l'immagine di base mediante il tag <IMG> aggiungendo all'interno l'attributo USEMAP. L'attributo USEMAP ci permette di definire un nome convenzionale della mappa che ci servirà più avanti come riferimento. Supponendo che la nostra immagine si chiami "esempiomappa.gif" ed il nome convenzionale da noi scelto è "esemap", la sintassi sarà:

<IMG SRC="esempiomappa.gif" USEMAP="#esemap">

Adesso dobbiamo specificare il funzionamento della mappa, ovvero quante e quali sono le aree cliccabili e a quali collegamenti ipertestuali devono essere associate.
Aree Cliccabili

Per specificare il tipo di funzionamento si utilizza il tag <MAP>..</MAP> che deve essere inserito dopo <IMG>. Nel tag di apertura di <MAP> si deve indicare il nome della mappa che deve corrispondere a quello dell'attributo USEMAP; quindi:

<MAP NAME="esemap">….</MAP>

Ora si devono individuare le aree cliccabili; a tale scopo bisogna inserire tra <MAP> e </MAP> tanti tag <AREA> quante sono le aree desiderate secondo la sintassi:

<MAP NAME="esemap">
<AREA SHAPE="forma dell'area" COORDS="coordinate in pixel" HREF="destinazione del collegamento">
</MAP>

All'interno di ogni tag <AREA> per definire l'area cliccabile si devono specificare tre attributi: SHAPE, COORDS e HREF.
SHAPE serve a definire la forma dell'area cliccabile e può assumere i seguenti valori:rect (area rettangolare), circle (area circolare) oppure poly (area poligonale, irregolare).
COORDS serve a definire la posizione di ogni area cliccabile all'interno dell'immagine. Questa posizione è definita dalle coordinate X e Y di alcuni punti di riferimento (pixel). A seconda della forma dell'area, si assumono i seguenti punti di riferimento:
se l'area è rettangolare, si indicano le coordinate del primo pixel in alto a sinistra e dell'ultimo in basso a destra;
Coordinate in pixel
se l'area è circolare, si indicano le coordinate del pixel centrale e la lunghezza in pixel del raggio;
se l'area è un poligono irregolare, si indicano le coppie di coordinate di tutti i suoi vertici.
Infine, HREF serve a definire la destinazione del collegamento ipertestuale.

Ritornando al nostro esempio, il codice Html della mappa grafica sarà:

<IMG SRC="esempiomappa.gif" USEMAP="#esemap">
<MAP NAME="esemap">
<AREA SHAPE="rect" COORDS="7,33,70,49" HREF="http://www.gdesign.it">
<AREA SHAPE="rect" COORDS="111,12,172,30" HREF="http://www.gdesign.it/pages/html/html.php">
<AREA SHAPE="rect" COORDS="103,73,186,90" HREF="http://www.gdesign.it/pages/howto/howto.php">
</MAP>

e questo è il risultato che otteniamo (provate a cliccare):
Mappa Cliccabile

Sicuramente a questo punto vi starete chiedendo come si calcolano le coordinate delle aree cliccabili, ed il vostro dubbio è perfettamente legittimo. Se per impostare il codice Html della mappa abbiamo usato il nostro buon Wordpad, adesso abbiamo bisogno di ricorrere ad un editor di immagini, perché con il blocco note è materialmente impossibile calcolare le coordinate delle aree cliccabili. Aprendo l'immagine nell'editor (Photoshop, Paint Shop Pro o altri), la barra di stato mostra istante per istante le coordinate in pixel su cui si trova il puntatore del mouse; quindi basta posizionarsi con il mouse nei punti che ci interessano per conoscere le coordinate necessarie ad impostare le aree cliccabili della nostra mappa grafica.

Impostare una mappa grafica a mano (cioè utilizzando il blocco note ed un editor di immagini) risulta essere un'operazione lunga e scomoda e per questo motivo quasi tutti i migliori editor web WYSIWYG automatizzano completamente le creazione delle mappe. Ad esempio, con Macromedia Dreamweaver bastano cinque minuti per creare una mappa grafica, ma ricorrere ad un editor web non ci esime affatto dal conoscere almeno le basi dei tag Html che si utilizzano per questo scopo.

Home page Lezioni di Html How To

^Top

Dai un voto a questo articolo:   HITS: 171 | VOTI: | MEDIA VOTI:     

Home:: Html:: Principi:: How To:: Download:: Tips:: Link:: Collabora:: Partners:: News&Updates:: Contatto:: Info

© 2001 - 2006 Giuseppe Di Carlo :: Riproduzione vietata ::

Utenti on line: 3