La Guida On-Line all'HTML per l'Internet Publishing tutta in Italiano
(C) 1995-98 by Flavio Del Greco e Valerio Zanini

Mappe cliccabili

   Ormai sappiamo che possiamo "ancorare" ad un'altra pagina un qualsiasi testo o una qualsiasi immagine; è sufficiente racchiudere il tutto fra i tag <A...> *** </A>. Ma si può fare di più.
   Sarebbe bello e d'effetto avere la possibilità di inserire nelle nostre pagine WEB una figura, un disegno, una foto, che ci collega ad altre pagine, a seconda di DOVE si va a cliccare col cursore. Ebbene, ciò è possibile con le cosiddette "Mappe cliccabili".
   Una mappa, non è altro che un file di testo (.map, in genere) associato ad una immagine di tipo GIF, in cui sono contenute delle informazioni sugli "hot spot", ovvero sui punti significativi dell'immagine. Un hot spot può avere forma rettangolare, circolare, o poligonale qualsiasi. Le informazioni vengono date in forma di coordinate.
   Esistono due standard per la forma con cui dare le coordinate: essi si chiamano NCSA e CERN. Il più comune è il primo, quindi parleremo di questo.

   Su righe successive dovrò inserire tutte le specifiche che desider; le possibilità sono semplicemente quattro:
circle URL Xc,Yc Xp,Yp
specifica un'area circolare, di centro Xc,Yc e il cui confine passa per il punto Xp,Yp.
rect URL X1,Y1 X2,Y2
area rettangolare i cui vertici alto-sinistro e basso-destro hanno coordinate X1,Y1 e X2,Y2 rispettivamente.
poly URL X1,Y1 X2,Y2 X3,Y3 ... ... Xn,Yn
area poligonale i cui vertici consecutivi sono specificati dalle coordinate Xi,Yi.
default URL
questa opzione individua tutta la parte di immagine che rimane al di fuori delle aree specificate con circle, rect e poly. Se omessa, cliccare al di fuori delle aree specificate non sortirà alcun effetto.
   In ogni caso, URL specifica l'indirizzo internet associato alla singola area.
   NOTA: l'origine delle coordinate (0,0) è l'angolo in alto a sinistra dell'immagine; l'asse delle X và verso destra, quello delle Y verso il basso.


   La cosa potrebbe sembrare alquanto complessa, ma parecchi programmi grafici (come "Paint Shop Pro") forniscono le coordinate di un'immagine semplicemente spostandovisi sopra col cursore. Inoltre esistono numerosi programmi che creano automaticamente i file di testo delle mappe: basterà tracciare sull'immagine i poligoni desiderati, e specificare per ognuno l'URL corrispondente.
   Clicca qui per un semplice e comodo programmino SHAREWARE (25$, Windows) che crea mappe nei due standard NCSA e CERN.

   NOTA IMPORTANTE: le vostre mappe NON possono essere provate localmente: è necessario che mettiate il file .map nella corretta directory del vostro server, e che siate on-line.

   Un modo per ovviare a questo problema c'è, e consiste nell'inserire le specifiche delle vostre mappe direttamente nel codice HTML, secondo le modalità che seguono.

   Innanzitutto inserite l'immagine (.gif) che volete che sia una mappa cliccabile, aggiungendo al solito tag, l'indicazione di una mappa da utilizzare, mediante l'attributo USEMAP, il cui valore è un nome di fantasia a vostra scelta preceduto da un cancelletto (#).
   Subito di seguito, indicate la specifica delle aree che dovranno rappresentare gli hot spots, secondo la sintassi seguente:

<IMG SRC="URL dell'immagine (.gif)" USEMAP="#pippo">

<MAP NAME="pippo">

   <AREA SHAPE="rect" COORDS="X1,Y1,X2,Y2" HREF="URL del collegamento">
   <AREA SHAPE="circle" COORDS="Xc,Yc,R" HREF="URL del collegamento">
   <AREA SHAPE="poly" COORDS="X1,Y1,X2,Y2,X3,Y3,...,...,Xn,Yn" HREF="URL del collegamento">

</MAP>

   dove le coordinate del rettangolo e del poligono sono come nel caso precedente, mentre i parametri dei cerchi, in questo caso, vengono dati mediante le coordinate del centro, seguite dal raggio; nota che qui tutte le coordinate sono separate da virgole, mentre nel caso dei file .map si usavano anche degli spazi.

  Clicca qui per un simpatico esempio


Indietro all'INDICE GENERALE


WebKit
(C) 1995-98 by Valerio Zanini e Flavio Del Greco
Tutti i diritti riservati.

Se avete qualsiasi suggerimento o correzione vi preghiamo di contattarci attraverso E-Mail.

I diritti di riproduzione di questa guida appartengono agli autori. Per richiedere permessi di duplicazione parziale di quanto qui contenuto o per ulteriori informazioni non esitate a scriverci.