Mappe di immagini cliccabile in HTML

Introduzione

In HTML sappiamo come creare un link rendendo cliccabile un'immagine, ovvero semplicemente scrivendo:

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

ma possiamo fare molto di più, ovvero creare 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, collegando i link a destinazioni ipertestuali differenti.

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

I tag HTML coinvolti

Per creare una mappa di immagine cliccabile dobbiamo utilizzare diversi comandi HTML che passiamo in rassegna:

• map - genera la mappa con riferimento all'immagine da mappare;
• area - genera le aree sensibili al click del mouse;
• img - visualizza l'immagine da mappare, con riferimento alla mappa.

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

Esempio di mappa di immagine cliccabile

Vediamo dunque un esempio di mappa di immagine cliccabile:

<map name="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>
<img src="miafoto.jpg" usemap="#MiaMappa" border="0">

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

La mappa è contenuta all'interno del tag map a cui viene assegnato un nome. All'interno 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 od una forma non quadrata o circolare).
• coords - accetta le coordinate dell'area cliccabile, separate da una virgola.

Al tag img viene associato l'attributo usemap (mappa da utilizzare) che accetta il nome della mappa (contenuto nella proprietà "name" del tag "map") preceduto da un cancelletto (#).

Il vero problema delle mappe d'immagine non è capire il funzionamento ma individuare le coordinate dell'area cliccabile che potrebbero essere le più disparate.

Allo scopo si consiglia di utilizzare un qualsiasi editor o software che generi immagini cliccabili per il Web e poi pulire ed adattare il codice alle proprie esigenze.

Creare mappe di immagine con TomaWeb Image Mapper

Esistono diversi software per creare mappe di immagine per il Web, alcuni non dedicati allo scopo quindi non gratuiti, come FronePage o Dreamweaver.

Esistono anche diversi software dedicati ed il migliore in rapporto qualità/prezzo (facile/gratuito) è TomaWeb Image Mapper (download) che analizzeremo in questo articolo.

Una volta scaricato il file twmap.exe basta eseguirlo e proseguire nell'installazione lasciando tutte le opzioni di default.

Il software sarà lanciabile dal menu:

Start / Programmi / mapper

Lanciare il software e segliere dal proprio hard disk un'immagine dal menu:

File / Load Image

Attenzione: il software chiede, per default, di selezionare un'immagine GIF ma è possibile cambiare la proprietà nella finestra di caricamento per selezionare una JPG.

L'interfaccia - con l'immagine caricata - sarà la seguente:

• <<
• 1
• 2
• >>