Mappe di immagini cliccabili in HTML

In HTML sappiamo tutti come inserire un’immagine "cliccabile"; si tratta, semplicemente, di applicare un link ad un tag <img/>:

<a href="pippo.html"><img src="pippo.jpg" border="0"></a>

In realtà, però, con HTML possiamo fare molto di più! possiamo creare, cioè, le cosiddette mappe di immagini cliccabili, rendendo quindi sensibile al click del mouse solo una determinata porzione di immagine, oppure rendendo cliccabile più porzioni di una stessa immagine, collegandole a link differenti.

Questa pratica è utile per la creazione di menu grafici complessi o di cartine geografiche che punteranno – come nel caso della cartina dell’Italia – alle singole regioni o città.

I tag &ltmap> e <area>

Per creare una mappa di immagine cliccabile dobbiamo utilizzare diversi tag HTML. Più precisamente dovremo far ricorso al tag <img>, <map> e <area>. Vediamo nel dettaglio il ruolo di ciascuno di questi tag:

• img – visualizza l’immagine che desideriamo utilizzare come mappa;
• map – genera la mappa HTML con riferimento all’immagine da mappare;
• area – genera le singole aree sensibili al click del mouse.

Ognuno dei tag HTML coinvolti disporrà di diversi attributi utili al funzionamento del sistema di tracciamento dei link in oggetto.

Esempio di mappa di immagine cliccabile

Vediamo dunque un semplice esempio di mappa di immagine cliccabile:

<img src="miafoto.jpg" usemap="#MiaMappa" border="0">
<map name="MiaMappa" id="MiaMappa">
  <area href="pag_1.html" shape="rect" coords="100, 200, 300, 400">
  <area href="pag_2.html" shape="rect" coords="500, 600, 700, 800">
</map>

Analizziamo adesso nel dettaglio la struttura ed il funzionamento del sistema.

Al tag img viene usato normalmente per includere un’immagine all’interno della pagina web; l’unica particolarità consiste nell’utilizzo dell’attributo usemap (mappa da utilizzare) che deve contenere il riferimento della mappa (contenuto negli attributi "name" e "id" del tag <map> che vedremo più avanti) preceduto da un cancelletto (#).

La struttura della mappa vera e propria è contenuta all’interno del tag map a cui viene assegnato un nome ed un identificativo univoco che deve corrispondere, come gia detto, a quanto specificato nell’attributo usemap del tag d’immagine.

All’interno del tag <map> troviamo i tag area a cui vengono passati i seguenti attributi:

• href – riferimento ipertestuale, classico di un generico link;
• shape – accetta il nome della forma dell’area cliccabile, ovvero:
• rect – area quadrata;
• circle – area circolare;
• polygon – poligono, ovvero area di qualsiasi forma (ad esempio i confini di una regione o di una forma irregolare).
• coords – accetta le coordinate dell’area cliccabile, separate da una virgola.

Definire le coordinate

E’ appena il caso di ricordare che per definire le coordinate di un punto devono sempre essere specificati due valori numerici corrispondenti ai valori di x e y. Nelle mappe di immagine le coordinate fanno riferimento all’immagine definita col tag <img> ed il punto 0,0 corrisponde con lo spigolo superiore sinistro dell’immagine stessa.

La definizione delle coordinate per ciascuna area varia a seconda dello shape specificato:

• Per un area rettangolare (rect) dovranno essere specificati 4 valori numerici, nell’ordine: x e y del punto corrispondente all’angolo superiore sinistro, x e y del punto corrispondente all’angolo inferiore destro;
• Per le forme circolari (circle) è necessario specificare tre valori nell’attributo coords: le coordinate del centro del cerchio (x e y) e la misura del raggio in pixel;
• Per le forme irregolari (polygon) devono essere specificate tutte le coordinate (x e y) di ogni punto che definisce il perimetro dell’area.

Il problema delle coordinate

Il vero problema delle mappe d’immagine non è capirne il funzionamento ma individuare le coordinate dell’area cliccabile che potrebbero essere le più disparate. Ovviamente la complessità dell’individuazione delle coordinate crescerà all’aumentare del numero e della complessità della forma delle aree da tracciare.

Allo scopo, solitamente, non si preocede "a mano" ma attraverso appositi software. Se utilizzate FrontPage o Dreamweaver non avrete nessun problema in quanto tale funzionalità è inclusa tra quelle dell’editor, in caso contrario potete fare ricorso a qualche software ad hoc per la generazione di mappe di immagine in HTML, tra questi il mio preferito è TomaWeb Image Mapper, un software (gratuito) molto leggero e facilissimo da utilizzare.