Appendice E

   Le mappe immagine

Le mappe, conosciute anche come immagini cliccabili sono una caratteristica utile e molto adoperata nel creare pagine web. Una mappa è una immagine visualizzata in modo che il browser può determinare le coordinate del punto in cui l'utente clicca. Il punto selezionato può essere utilizzato per indirizzare ad un particolare URL associato a quel punto.
Un modo comune e naturale di utilizzo è quello di disegnare l'immagine come una mappa geografica e posizionare i link come le città e i paesi segnati sulla mappa. Le mappe possono essere anche usate per costruire un menu o una barra di navigazione.

Tutte le mappe necessitano il caricamento dell'immagine all'interno della pagina mostrata dal browser. Questa è strutturata in un sistema di coordinate che iniziano dall'angolo in alto a sinistra. Moltissimi programmi di grafica possono mostrare queste coordinate. Le zone sensibili possono avere la forma circolare, rettangolare o poligonale.

Ci sono quattro modi per ottenere una mappa cliccabile.

1. Lato client
   Tutti gli URL e le aree sensibili sono definite nel codice HTML che viene inviato al browser e non c'è bisogno di alcun file speciale da definire sul server. È il modo migliore e più semplice per costruire una mappa immagine, finché il numero di aree rimane abbastanza piccolo. Per un numero di zone sensibili diventa molto alto servono particolari meccanismi di tipo CGI.
   Le mappe lato client furono introdotte con lo standard HTML 3.2 ed alcuni vecchi browser non le supportano.
   
   L'attributo USEMAP del tag <IMG> è utilizzato per indicare la dichiarazione di una mappa sensibile. La mappa sarà poi definita tra i tag <MAP> e </MAP> utilizzando il tag <AREA>.
   Il valore associato all'attributo USEMAP è usato per identificare il particolare tag <MAP> che definisce la mappa, dal momento che più mappe immagine possono essere create nella stessa pagina. Il tag <MAP> usa l'attributo NAME per dichiarare il nome della mappa, allo stesso modo in cui viene dichiarata un'ancora con il tag <A>.
   
   
2. Lato server
   Le informazioni che definiscono le zone sensibili sono contenute in uno speciale file di mappatura che rimane sul server. Il client invia una richiesta indicando le coordinate del punto selezionato; il server quindi elabora il file di mappatura e restituisce un URL al client.
   L'attributo ISMAP è associato al tag <IMG> all'interno di un contenitore <A> ... </A>. L'URL associato all'attributo HREF del tag <A> indica un file speciale sul server che riceve le coordinare e legge il file di mappatura. Il formato del file è specifico per ciascun programma ed il server deve essere configurato opportunamente per funzionare in modo corretto.
   Molti server richiedono che il file di mappatura abbia una estensione .map e che consista in una serie di coordinate che servano a delimitare figure all'interno di una immagine.
   
   Ci sono 4 tipi possibili di figure lato server:
   1. RECT
      Questa figura definisce una zona rettangolare. Le coppie di coordinate richieste sono due e rappresentano i vertici in alto a sinistra e in basso a destra del rettangolo.
      
   2. CIRCLE
      Questa figura definisce un cerchio. Le coppie di coordinate richieste sono due ed indicano il centro del cerchio ed un qualunque punto della circonferenza. Notiamo come il cerchio NON sia definito utilizzando centro e raggio.
      
   3. POLY
      Questa definisce una zona a forma di poligono irregolare. È richiesta una coppia di coordinate per ciascuno dei vertici del poligono e la chiusura è implicita, per cui non c'è bisogno di ripetere l'ultima coppia di coordinate.
      
   4. DEFAULT
      Non sono richieste coordinate, ed indica una zona non sensibile. È previsto in ogni caso l'invio di un URL al client, che sarà costruito in modo da indicare il fatto che si è cliccato su una zona non consentita.
      
      
   Il formato del file cambia da serve a server. Questo appena descritto è quello utilizzato comunemente sui server di tipo Apache. I server del Cern utilizzano le parentesi per le coppie di coordinate e le virgolette per il nome delle zone, che può essere anche scritto per esteso. Altri server possono richiedere che il nome del file abbia estensione .mapx.
   
   
3. Meccanismi CGI
   Questo metodo è identico al precedente. La differenza principale consiste nel fatto che il link è elaborato mediante il meccanismo CGI. Il vantaggio di questo metodo è la possibilità di implementare zone più complesse di figure geometriche su una rappresentazione bitmap dell'immagine.
   
   
4. Immagini INPUT nei form
   Il tag <INPUT> utilizzato all'interno di un form ha l'attributo TYPE="image" che permette di creare una immagine con la funzione di "submit" il cui valore associato viene riportato ad un file sul server alla stregua di un collegamento di tipo CGI.
   Ciò ha il vantaggio del meccanismo CGI appena descritto con il vantaggio che l'utente può inserire anche altre informazioni nelle altre caselle di input. Ad esempio può essere possibile fornire un meccanismo per selezionare un punto dell'immagine piuttosto che un altro a seconda di particolari condizioni indicate in una casella di tipo <SELECT>. Occorrerà fare in modo che l'utente non clicchi la mappa prima di aver completato l'inserimento dei valori nelle altre caselle.

Vedi anche i tag <AREA>, <FORM>, <IMG>, <INPUT> e <MAP>.