Creare Image Map (elemento MAP)

Le mappe cliccabili hanno fatto il loro ingresso nel Web publishing già da molto tempo, fin dalle primissime versione di HTML. Si tratta di elementi molto usati dagli sviluppatori per la facilità d'utilizzo e l'evidente utilità.
Il concetto di mappa cliccabile è semplice e parte da un'altrettanto semplice constatazione: spesso collegare un unico link ad un'intera immagine limita il webdesigner che invece potrebbe linkare diverse pagine sfruttando il singolo gadget grafico. Le mappe cliccabili rimuovono questo limite e consentono, all'interno di una singola immagine, di creare differenti aree di ritaglio, ognuna delle quali con un link diverso. Il concetto fondamentale sul quale si reggono le mappe cliccabili è quelle delle coordinate, che uniche possono indicare al browser punti precisi dell'immagine. Esistono due tipi di mappe, ma prima di passare alla loro esposizione è bene precisare che l'uso di estensioni GIF o JPG è ininfluente e non crea alcuna incompatibilità.
Mappe dal lato server (ISMAP)

Affinchè queste mappe funzionino è necessario che sul tuo server siano presenti le estensioni CGI necessarie. Si tratta di programmi gratuitamente scaricabili in Rete e raccolti nei numerosi siti che trattano l'argomento CGI (un URL per tutti: http://www.cgi-resources.com ).
Le ISMAP, questo il termine tecnico che indica questo genere di mappe, individuano le coordinate dell'immagine attraverso un file esterno. Gli URL creati dalle ISMAP sono seguiti dal valore delle coordinate x e y, separate da una virgola e precedute da un punto interrogativo. Ecco un esempio:

http://www.tuosito.it/cgi-bin/menu.map?25,55

Questo URL indica che nel punto x=25 e y=55 il link è quello stabilito all'interno della ISMAP.
Mappe dal lato client (USEMAP)

Le mappe da lato server non sono molte diffuse soprattutto per la possibilità di ottenere un risultato del tutto simile con una procedura da lato client. Stiamo introducendo le USEMAP, cioè le mappe che vengono interpretate senza alcun intervento da parte del server. La sintassi corretta che HTML indica per inserire USEMAP in un documento è la seguente:

<IMG SRC="img/home/menu.gif" WIDTH=609 HEIGHT=87 BORDER=0 usemap="#menu">

Dove la prima parte del codice richiama evidentemente l'immagine e ne stabilisce la grandezza; mentre #menu indica il nome del file (con estensione .map) che contiene le informazioni relative alle coordinate. In altre parole le USEMAP non fanno altro che richiamare un file esterno che per ogni link dell'immagine indica un relativo URL. Quello che segue è il contenuto di un file con estensione .map (editabile molto semplicemente anche con blocco notes di Win95).
Per comprendere meglio il funzionamento di una USEMAP prendiamo in considerazione l'immagine che segue:

simuliano che la nostra esigenza sia quella di creare tre differenti link d'immagine per ognuno dei tre elementi grafici: la bicicletta, il mouse e i pompieri. Se usassimo un normale ancoraggio d'immagine avremmo un unico link per tutti gli elementi grafici. Usando un USEMAP, al contrario, è possibile creare tre differenti aree di link per ognuna delle immagini.
Il codice così generato viene inserito all'interno dello stesso documento:

<map name="06a">
<area shape="poly" alt="Questa è una bicicletta" coords="69,26,47,25,52,15,31,15,27,19,35,28,37,34,34,39,20,37,12, 44,7,51,5,57,5,65,8,71,9,75,16,79,24,81,31,81,40,79,44,73,50,67, 55,65,65,56,65,66,68,72,73,79,91,84,98,80,110,64,106,53,100,43,87, 37,82,38,75,23,85,24,82,17,68,17,71,25,71,25,71,25,71,25" href="bicicletta.htm" title="Questa è una bicicletta">

<area shape="poly" alt="Questo è un mouse" coords="181,27,172,14,163,10,150,14,136,23,136,34,128,40,123,32,112, 31,115,42,121,52,132,54,139,49,146,38,150,33,152,48,148,64,153,80, 161,82,172,82,180,76,183,53,181,34,181,24,181,25" href="mouse.htm" title="Questo è un mouse">

<area shape="rect" alt="Camion dei pompieri" coords="207,7,279,82" href="pompieri.htm" title="Camion dei pompieri">

<area shape="default" nohref>
</map>

Il codice è contenuto all'interno dei tag MAP, che chiudono e aprono la sintassi. Le tre aree di ritaglio sono generate da altrettanti campi AREA. Esistono tre differenti modi per ritagliare un'immagine:
poly: ritaglia immagini frastagliate attraverso linee rette
rect: ritaglia aree quadrate o rettagolari di 4 lati
circle: ritaglia aree circolari

Nel nostro esempio sono presenti aree di ritaglio poly e rect.
I commenti alle singole aree di ritaglio sono generati dai campi title e alt e fanno in modo che il browser visualizzi testo descrittivo per ogni singola area di link.

Creato il codice è necessario inserire all'interno dell'immagine un riferimento allo stesso. Per fare questo nel nostro esempio abbiamo impostato il seguente codice:

<img src="06a.gif" width=300 height=100 border=0 usemap="#06a">

La dicitura usemap="#06a" richiama il codice impostato in precedenza ed assegna alle immagini le aree di ritaglio.
Creare delle aree di ritaglio non è affatto semplice se non si dispone di un programma adatto allo scopo che eviti un calcolo manuale. La gran parte degli editor HTML presenti sul mercato prevede generatori automatici di mappe, ed ai file di help di ognuno di essi rimandiamo per un approfondimento ulteriore. Esistono anche programmi esclusivamente dedicati alla creazione di USEMAP, tra questi consigliamo Mapedit: di piccole dimensioni (poco meno di 300kb di file d'installazione) e facile utilizzo.