Il tag <AREA> in Html

In questa lezione del corso HTML ti spiego come utilizzare il tag <area> per creare una mappa cliccabile e interattiva

<area>

Il tag <area> ti permette di definire un'area cliccabile all'interno di un'immagine in un documento HTML.

In altre parole, questo tag sovrappone una griglia cliccabile a una immagine per renderla interattiva.

Ogni area della griglia ha un link diverso. Quindi, a seconda del punto dell'immagine in cui l'utente clicca, accede una pagina web differente del sito.

Esempio. Se hai una mappa dell'Italia sul tuo sito, puoi utilizzare il tag <area> per definire le diverse regioni come aree cliccabili. In questo modo puoi creare un collegamento ipertestuale univoco per ogni regione presente nell'immagine, che porta alla corrispondente pagina web della regione

Ma come si usa questo tag in pratica?

Prima di tutto, devi definire l'immagine tramite il tag <img>.

Nell'attributo usemap indica il nome della mappa che desideri associare all'immagine. Deve iniziare con il carattere #.

Poi devi utilizzare il tag <map> per creare la mappa.

Nell'attributo name devi specificare il nome della mappa. E' lo stesso che hai indicato in precedenza nell'immagine ma senza il carattere #.

All'interno del tag <map> puoi definire diverse aree cliccabili utilizzando il tag <area>.

Il tag <area> ha diversi attributi che ti permettono di personalizzare le aree cliccabili.

shape
definisce la forma dell'area cliccabile: rect (rettangolo), circle (cerchio), poly (poligono).
coords
definisce le coordinate dell'area cliccabile all'interno dell'immagine.
- Se shape=rect devi indicare le coordinate (x;y) del vertice in alto a sinistra e del vertice in basso a destra del rettangolo.
- Se shape=circle devi indicare le coordinate (x;y) del centro e la lunghezza del raggio del cerchio.
- Se shape=poly devi indicare le coordinate (x;y) di ogni vertice del poligono.
href
definisce il link che verrà aperto quando l'utente clicca sull'area cliccabile.
alt
fornisce una descrizione testuale alternativa dell'area cliccabile per gli utenti non vedenti.
target
specifica se il link deve essere aperto in una nuova finestra o nella stessa finestra del browser.
nohref
indica una zona senza collegamento
tabindex
definisce l'ordine di attivazione delle aree ossia la sequenza in cui si selezionano premendo il tasto tabulatore (TAB) della tastiera.
accesskey
definisce un carattere di accesso per selezionare un'area tramite la tastiera in modo diretto.

Il risultato finale è una immagine interattiva con due link diversi a seconda della zona in cui l'utente clicca.

Nota. Se alcune zone dell'immagine si sovrappongono, si crea il problema di avere due link in una stessa zona dell'immagine. In questi casi di intersezione è attivo il link dell'area definita prima.

Puoi usare il tag <area> nella sezione <body> del documento HTML.

Ecco un esempio di pagina web completa.

<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
...
<img src="map-world.jpg" alt="Mappa del mondo" usemap="#worldmap">
...
<map name="worldmap">
<area shape="poly" coords="25,90,56,92,60,81,34,74,21,84" href="europe.html" alt="Europa">
<area shape="rect" coords="260,125,380,170" href="north-america.html" alt="Nord America">
</map>
</body>
</html>

In questo documento l'immagine "map-world.jpg" viene assegnata a una mappa chiamata "#worldmap" tramite l'attributo usemap del tag <img>.

Successivamente, viene definita la mappa "worldmap" utilizzando il tag <map>.

Il nome della mappa è indicato tramite l'attributo name.

La mappa contiene due aree cliccabili definite attraverso l'uso del tag <area>.

In ogni tag <area> l'attributo "shape" specifica la forma dell'area (poligono o rettangolo) mentre l'attributo "coords" indica le coordinate x e y degli angoli che delimitano l'area stessa.

Il primo tag <area> definisce un poligono che passa per i punti (x;y) seguenti (25;90),(56;92),(60;81),(34;74),(21;84)

Il secondo tag <area> definisce un rettangolo con il vertice in alto a sinistra nel punto (x;y)=(260;125) e il vertice in basso a destra (x;y)=(380;170).

In ciascun tag <area> viene inserito il link di destinazione tramite l'attributo href e una descrizione testuale tramite l'attributo alt.

Il risultato finale è un'immagine mappa cliccabile con due aree linkate a pagine di destinazione diverse.

Nota. Quando l'utente clicca sul continente europeo, il browser apre la pagina "europe.html". Viceversa, quando l'utente clicca sul continente nord americano, il browser apre la pagina "north-america.html".