Tag HTML <area>
Il tag <area> definisce le aree attive di una mappa immagine. Descrizione, attributi ed esempi d'uso.
Il tag <area> identifica le aree attive (coordinate, forma, dimensioni, ecc.) di una mappa immagine, definita dal tag <map>. Quando si fa clic su un'area attiva dell'immagine, viene eseguita una determinata azione, ad esempio il reindirizzamento a una pagina con informazioni dettagliate.
Questa pagina spiega cosa fa <area>, come funziona il sistema di coordinate coords, tutti i valori di forma (inclusi poly e default), le regole di accessibilità da rispettare e le problematiche legate ai layout responsive che si incontrano spesso nei progetti reali.
Il tag <area> è sempre posizionato all'interno del tag <map>. Le aree attive possono sovrapporsi; in quel caso, viene attivata al clic l'area che appare più avanti nell'ordine del DOM.
Perché e quando usare una mappa immagine
Una mappa immagine trasforma parti di un singolo elemento <img> in link cliccabili separati. Ogni <area> diventa un proprio hotspot con il proprio href, in modo che un'immagine possa portare a diverse destinazioni — si pensi a un diagramma cliccabile, a una pianta di un edificio o a una mappa di regioni geografiche.
Si collega un'immagine alla sua mappa tramite l'attributo usemap sull'elemento <img>, che punta al name della mappa (es. usemap="#blockmap" corrisponde a <map name="blockmap">).
Quando una mappa immagine è una buona soluzione:
- Le regioni cliccabili si trovano effettivamente all'interno di un'unica immagine raster (una foto, un diagramma scansionato) e non possono essere facilmente suddivise in elementi separati.
- Le forme sono irregolari (il contorno di un paese, un hotspot non rettangolare) dove un'area
polyè la soluzione naturale.
Quando conviene usare un'alternativa:
- Hotspot rettangolari su contenuti separati → è sufficiente disporre link individuali
<a>(ciascuno che racchiude la propria immagine o un blocco stilizzato). Questo approccio è più flessibile e responsive per impostazione predefinita. - Grafica vettoriale / diagrammi scalabili → usare SVG inline con elementi
<a>al suo interno. Gli hotspot SVG si adattano al layout, supportano stili hover/focus e sono molto più accessibili rispetto alle forme<area>basate su pixel. - Semplici pulsanti sovrapposti → i link CSS posizionati in modo assoluto sull'immagine si adattano meglio rispetto a
coordsfisse.
Il compromesso principale: le coordinate di <area> sono misurate in pixel fissi, quindi una mappa immagine non si adatta quando l'immagine viene ridimensionata tramite CSS responsive (vedi la sezione sulla limitazione per layout responsive e mobile di seguito).
Sintassi
Il tag <area> è vuoto, il che significa che il tag di chiusura non è richiesto. Tuttavia, in XHTML, il tag <area> deve essere chiuso (<area />).
Esempio del tag HTML <area>:
Tag HTML <area>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Click on the logo or on one of the logo item to watch it closer:</p>
<img src="/uploads/media/news_gallery/0001/01/thumb_316_news_gallery_list.jpeg" width="250" height="150" alt="block" usemap="#blockmap" />
<map name="blockmap">
<area shape="circle" coords="50,32,25" alt="html" href="/uploads/media/book_gallery/0001/01/d450f0358f947dffb3af91195c3002600d74101b.png" />
<area shape="circle" coords="218,115,25" alt="css" href="/uploads/media/book_gallery/0001/01/25521e981b34da57c8f51baddc5b76351b855818.png" />
<area shape="circle" coords="195,32,28" alt="php" href="/uploads/media/book_gallery/0001/01/4bbee6698c4884f25c46010d61b658dd62d2c04f.png" />
<area class="homepage" shape="rect" coords="35,55,90,90" alt="php" href="https://www.w3docs.com/" />
</map>
</body>
</html>Come funziona il sistema di coordinate coords
Questa è la parte che gli sviluppatori fraintendono più spesso. Tutti i valori di coords sono offset in pixel misurati dall'angolo in alto a sinistra dell'immagine — non della pagina e non del viewport. Il primo asse (x) cresce verso destra; il secondo asse (y) cresce verso il basso.
Il significato dei numeri dipende da shape:
rect—x1,y1,x2,y2: l'angolo in alto a sinistra, poi l'angolo in basso a destra.circle—x,y,radius: il punto centrale, poi il raggio (tutto in pixel).poly—x1,y1,x2,y2,...,xn,yn: una lista ordinata di vertici; il browser li connette e chiude la forma automaticamente.default— nessuna coordinata; l'area copre l'intera immagine.
Esempio pratico
Per un'immagine larga 250 pixel e alta 150 pixel, un rettangolo che copre il quarto in alto a sinistra è:
<area shape="rect" coords="0,0,125,75" alt="Top-left quarter" href="/top-left">Si legge così: angolo in alto a sinistra a (0, 0), angolo in basso a destra a (125, 75). Un cerchio centrato al centro della stessa immagine con un raggio di 40 px è coords="125,75,40".
Poiché si tratta di pixel grezzi, devono corrispondere alla dimensione intrinseca (naturale) dell'immagine, non alla dimensione di visualizzazione ridimensionata tramite CSS.
Esempio con la forma poligonale (poly)
Usare shape="poly" per qualsiasi hotspot non rettangolare e non circolare — un triangolo, una freccia, il contorno di un paese. Elencare i vertici in ordine; il browser disegna linee rette tra i punti consecutivi e chiude il percorso tornando al primo punto.
<!DOCTYPE html>
<html>
<head>
<title>Polygon image map</title>
</head>
<body>
<p>Click inside the triangle:</p>
<img src="/uploads/media/news_gallery/0001/01/thumb_316_news_gallery_list.jpeg"
width="250" height="150" alt="Diagram" usemap="#shapemap" />
<map name="shapemap">
<!-- A triangle: top-center, bottom-left, bottom-right -->
<area shape="poly" coords="125,20,30,130,220,130"
alt="Triangle hotspot linking to the docs" href="https://www.w3docs.com/" />
</map>
</body>
</html>I tre punti (125,20), (30,130), (220,130) formano gli angoli del triangolo; non è necessario ripetere il primo punto alla fine — la forma si chiude da sola.
Attributi
| Attributo | Valore | Descrizione |
|---|---|---|
| alt | testo | Specifica un testo alternativo per l'area attiva. |
| coords | x1,y1,x2,y2 | x,y,radius | x1,y1,...,xn,yn | Specifica le coordinate dell'area attiva in pixel dall'angolo in alto a sinistra dell'immagine. I valori dipendono dalla forma: rect (angoli in alto a sinistra e in basso a destra), circle (centro e raggio), poly (vertici del poligono); omettere per default. |
| download | filename | Indica che quando si fa clic su un'area specifica, il file deve essere scaricato. |
| href | URL | Specifica il riferimento per la transizione. Omettere href rende l'area inattiva (nessun link). |
| hreflang | language_code | Definisce la lingua del documento di riferimento. Usato solo con href. |
| nohref | (nessuno) | Deprecato. Un tempo contrassegnava un'area come priva di link. Rimosso in HTML5 — al suo posto, omettere semplicemente l'attributo href. |
| rel | alternate | author | bookmark | help | license | next | nofollow | noreferrer | prefetch | prev | search | tag | Stabilisce un collegamento tra il documento corrente e quello collegato. |
| shape | rect | circle | poly | default | Definisce la forma dell'area. default fa sì che l'area copra l'intera immagine. |
| target | _blank | _self | _top | _parent | frame_name | Specifica come deve essere aperto il documento collegato. frame_name non è supportato in HTML5. |
| type | media_type | Specifica il tipo MIME del documento collegato. |
Il tag <area> supporta anche gli attributi globali e gli attributi evento.
Il valore shape="default"
shape="default" definisce un'area senza coordinate che copre l'intera immagine — tutto ciò che non è già occupato da un'area rect, circle o poly più specifica. È utile come link di fallback o come destinazione catch-all "clic ovunque altro".
<map name="catchall">
<area shape="circle" coords="125,75,40" alt="Center hotspot" href="/center">
<area shape="default" alt="Everywhere else" href="/elsewhere">
</map>Poiché le aree più specifiche con corrispondenza precedente hanno la priorità, inserire default per ultima in modo che intercetti solo i clic non gestiti da nessun'altra area.
Accessibilità
L'accessibilità è la preoccupazione pratica più importante con le mappe immagine, perché l'immagine stessa non contiene testo. Ogni hotspot è invisibile per un lettore di schermo a meno che non venga etichettato.
altè obbligatorio su ogni<area>. Le specifiche lo richiedono ogni volta che l'area ha unhref. Deve essere significativo: deve descrivere dove porta il link (destinazione o azione del link), non l'immagine. Ad esempioalt="Visualizza il riferimento CSS", nonalt="cerchio".- Navigazione da tastiera: i browser espongono ogni
<area>come un link raggiungibile con il focus, in modo che gli utenti possano spostarsi conTabsu ogni hotspot e attivarlo conInvio. Questo funziona solo se ogni area ha sia unhrefche unaltchiaro — un'area senzaaltviene annunciata come link senza etichetta, il che costituisce una seria barriera. - L'immagine necessita comunque del proprio
alt. Impostarealtsull'elemento<img>per descrivere l'immagine nel suo insieme, separatamente dalle etichette dei link per area. - Per le immagini complesse con molte regioni, valutare se un elenco di semplici link
<a>o un SVG inline con link focalizzabili sarebbe più adatto agli utenti di tecnologie assistive rispetto agli hotspot in pixel.
Limitazione per layout responsive e mobile
Le coordinate di <area> sono valori in pixel fissi legati alla dimensione intrinseca dell'immagine. Non si adattano. Nel momento in cui si rende l'immagine fluida — ad esempio con width: 100% o max-width: 100% in CSS — l'immagine visibile si ridimensiona ma gli hotspot restano ancorati alla griglia di pixel originale. Le regioni cliccabili si spostano quindi rispetto a ciò che l'utente vede, e su schermi mobili piccoli possono diventare minuscole e difficili da individuare.
L'HTML semplice non offre una soluzione integrata a questo problema. In pratica si può scegliere tra:
- Evitare le mappe immagine per i layout responsive e usare alternative scalabili — link
<a>posizionati con CSS sovrapposti all'immagine, o un SVG inline i cui hotspot<a>si adattano al layout. - Oppure ricalcolare le coordinate con JavaScript ogni volta che l'immagine viene ridimensionata (una dipendenza aggiuntiva da mantenere).
Se il design deve adattarsi a diverse dimensioni di schermo, preferire SVG o link posizionati rispetto a <area> fin dall'inizio.