Il tag <MAP> in Html

Il tag <map> del linguaggio HTML ti permette di creare la mappa cliccabile di un'immagine interattiva.

Una immagine interattiva è un'immagine che contiene delle aree con collegamenti cliccabili, che permettono agli utenti di accedere ad altre pagine web.

In pratica, una mappa cliccabile è un'immagine con più link al suo interno.

Esempio. Se hai un'immagine di una mappa geografica del mondo, puoi utilizzare questa immagine come mappa interattiva per creare diversi collegamenti. A seconda della zona in cui l'utente clicca, il browser si collega a una pagina web specifica. Ad esempio, se l'utente clicca sul continente americano, verrà indirizzato alla pagina web dedicata all'America, mentre se clicca sul continente europeo, verrà indirizzato alla pagina web dedicata all'Europa, e così via. Ecco un esempio pratico di mappa interattiva.
world map

Come funziona il tag <map>?

Per prima cosa devi assegnare un nome alla mappa tramite l'attributo name.

Il tag <map> è utilizzato in combinazione con il tag <area> per definire le aree cliccabili all'interno di un'immagine.

Ogni area cliccabile nella mappa è definita da un tag <area> separato che indica

dove si trova l'area all'interno dell'immagine (coords)
la forma dell'area (shape)
il collegamento ipertestuale di destinazione quando l'utente clicca sull'area (href)

Inserisci i vari tag <area> tra il tag di apertura <map> e quello di chiusura </map>.

Puoi trovare gli approfondimenti su questi attributi (shape, coords, href) nella nostra guida al tag <area>.

Una volta che hai definito le tue aree cliccabili utilizzando gli elementi <area>, devi associare la mappa all'immagine tramite l'attributo "usemap" del tag <img>.

Questo attributo indica al browser che la tua immagine ha una mappa associata e che dovrebbe essere resa cliccabile.

Nota. Se alcune zone dell'immagine sono sovrapposte l'una sull'altra, il browser sceglie il link definito prima degli altri nell'area sovrapposta.

Puoi usare il tag <map> all'interno della sezione <body> del documento HTML.

Ecco un esempio di pagina web.

<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
...
<img src="map-world.jpg" alt="Mappa del mondo" usemap="#worldmap">
...
<map name="worldmap">
<area shape="poly" coords="170,10,240,10,240,60,170,60" href="europe.htm" alt="Europa">
<area shape="rect" coords="10,10,90,90" href="north-america.htm" alt="Nord America">
</map>
</body>
</html>

In questa pagina web l'immagine "map-world.jpg" viene visualizzata sul browser tramite il tag tag <img>.

Nel tag <img> è presente l'attributo usemap che associa l'immagine a una mappa chiamata "#worldmap".

Successivamente, il tag <map> definisce la mappa "#worldmap.

I dettagli sulle aree cliccabili sono definiti tramite i vari tag <area> tra il tag di apertura <map> e il tag di chiusura </map>.

In questo caso la mappa contiene solo due aree cliccabili.

Se l'utente clicca sulla prima area, viene indirizzato alla pagina "europe.html" del sito web.
Se l'utente clicca sulla seconda area, viene indirizzato alla pagina "north-america.html" del sito web.

Il risultato finale è questa mappa interattiva cliccabile.

Non c'è limite al numero delle aree cliccabili che puoi inserire in una mappa.

Questo ti permette di creare immagini interattive nella pagina web che migliorano l'esperienza dell'utente durante la navigazione nel sito.