Tag HTML map - Impara HTML

Il tag HTML <map> definisce una mappa immagine lato client — un'immagine le cui diverse regioni rimandano a destinazioni differenti. Anziché un unico link per l'intera immagine, puoi contrassegnare più "zone attive" cliccabili sovrapposte ad essa. Ogni zona attiva è descritta da un elemento <area>, e tutti gli elementi <area> si trovano all'interno di un unico <map>.

Si chiama mappa immagine lato client perché il browser gestisce localmente l'interpretazione e il rendering delle regioni — non è necessario alcun viaggio di andata e ritorno al server per determinare quale regione è stata cliccata.

Questa pagina illustra come un <map> viene collegato all'immagine, come definire le regioni cliccabili con <area>, i requisiti di accessibilità e quando una mappa immagine è (e non è) lo strumento giusto.

Come `<map>` si collega a un'immagine

Un <map> da solo non fa nulla. Deve essere referenziato da un'immagine tramite due attributi che devono corrispondere:

Su <map>: l'attributo name, ad es. <map name="planets">.
Su <img>: l'attributo usemap, che punta a quel nome con un # iniziale, ad es. <img usemap="#planets">.

<img src="planets.png" alt="The planets" usemap="#planets" />

<map name="planets">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.html" />
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercury.html" />
</map>

Regole di collegamento da tenere a mente:

Il prefisso # è richiesto solo su usemap. Il valore di name si scrive senza #; il valore di usemap si scrive con (è un riferimento a frammento). name="planets" ↔ usemap="#planets".
I valori sono sensibili alle maiuscole. usemap="#Planets" non corrisponderà a name="planets".
Il name deve essere univoco nel documento e non deve essere vuoto.
Gli elementi <area> devono essere all'interno di <map>. Un <area> posizionato altrove non ha alcun effetto.

Se i nomi non corrispondono esattamente, l'immagine viene semplicemente visualizzata senza regioni cliccabili e nessun errore viene mostrato — un comune bug silenzioso.

Definire le regioni cliccabili con `<area>`

Ogni regione è un elemento <area>. Due attributi ne descrivono la geometria, gli altri descrivono il link:

Attributo	Scopo
`shape`	Tipo di regione: `rect`, `circle`, `poly` o `default`.
`coords`	Coordinate che definiscono la regione, in pixel CSS.
`href`	URL di destinazione della regione.
`alt`	Testo alternativo per la regione (obbligatorio quando `href` è presente).
`target`	Dove aprire il link (`_blank`, `_self`, ecc.).

Il significato di coords dipende da shape:

Shape	Formato `coords`	Significato
`rect`	`x1,y1,x2,y2`	Angoli in alto a sinistra e in basso a destra di un rettangolo.
`circle`	`x,y,r`	Punto centrale `x,y` e raggio `r`.
`poly`	`x1,y1,x2,y2,x3,y3,…`	Un elenco di punti che formano un poligono (ogni coppia è un vertice).
`default`	(nessuno)	L'intera immagine non coperta da un'altra area.

Tutte le coordinate sono misurate dall'angolo in alto a sinistra dell'immagine (0,0), in pixel, relative alla dimensione intrinseca dell'immagine.

<map name="shapesmap">
  <!-- rectangle from (0,0) to (60,60) -->
  <area shape="rect" coords="0,0,60,60" alt="Square region" href="square.html" />
  <!-- circle centered at (120,30) with radius 25 -->
  <area shape="circle" coords="120,30,25" alt="Round region" href="circle.html" />
  <!-- triangle through three points -->
  <area shape="poly" coords="160,0,200,60,120,60" alt="Triangle region" href="triangle.html" />
</map>

Sintassi

Il tag <map> viene utilizzato in coppia. Il contenuto è scritto tra il tag di apertura (<map>) e quello di chiusura (</map>).

Esempio del tag HTML `<map>`:

Tag HTML <map>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>Click on the logo or on one of the logo items to watch it closer:</p>
    <img src="/uploads/media/default/0001/01/0f94cf189afcdc39c4df2a73d230d1a7425ee66d.png"  width="145" height="126" alt="block" usemap="#blockmap" />
    <map name="blockmap">
      <area shape="circle" coords="45,58,30" alt="html-book" href="https://www.w3docs.com/learn-html.html" />
      <area shape="circle" coords="88,64,15" alt="html-quiz" href="https://www.w3docs.com/quiz-start/html-basic" />
      <area shape="circle" coords="114,67,14" alt="html-snippets" href="https://www.w3docs.com/snippets/html.html" />
    </map>
  </body>
</html>

Provalo tu stesso »

Attributi

Attributi	Valore	Descrizione
name	mapname	Imposta il nome di una mappa immagine.

L'elemento <map> utilizza anche gli Attributi Globali.

Accessibilità

Le mappe immagine sono puramente visive a meno che non le si renda diversamente, quindi alcune regole sono importanti:

Ogni <area> con link necessita di un alt significativo. Gli screen reader annunciano ogni area tramite il testo alt, esattamente come fanno per i link. Un alt vuoto o mancante su un'area cliccabile lascia il link senza etichetta.
Fai in modo che l'alt descriva la destinazione, non l'immagine. "Apri la pagina dei contatti" è più utile di "cerchio blu".
La navigazione da tastiera funziona automaticamente per le aree che hanno un href: ognuna diventa un link focalizzabile e raggiungibile con Tab. Evita di posizionare l'interattività solo in una regione senza href, poiché non sarà raggiungibile da tastiera.
Non affidarti a zone attive minuscole. Regioni piccole o di forma irregolare sono difficili da raggiungere con mouse, tocco o puntatori assistivi.

Quando usarlo (e quando no)

Le mappe immagine lato client sono una funzionalità obsoleta e funzionano ancora, ma si adattano solo a un insieme ristretto di casi oggi.

Uso ragionevole: una singola immagine raster (una foto, un diagramma, una piantina scansionata) in cui alcune regioni rettangolari o circolari devono collegarsi a qualcosa, e l'immagine non verrà ridimensionata in modo responsive.

Evita <map> quando:

Il layout è responsive. I coords sono valori fissi in pixel legati alla dimensione intrinseca dell'immagine; non si scalano quando l'immagine viene ridimensionata con CSS, quindi le zone attive si spostano fuori posizione.
Le regioni sono pulsanti, menu o qualcosa di complesso. Costruiscili usando vero HTML/CSS.

Per la maggior parte delle esigenze moderne esistono alternative migliori:

Ancore sovrapposte con CSS — posiziona elementi <a> con posizionamento assoluto (in percentuale) sopra un'immagine responsive. Si scala correttamente ed è completamente accessibile.
<svg> inline — disegna forme come elementi reali, scalabili e stilizzabili e racchiudi ogni forma cliccabile in un <a>. Questa è l'opzione più flessibile per diagrammi e regioni complesse.

Vedi anche Link HTML per informazioni sul comportamento di ancore e destinazioni dei link.

Esercitazione

Pratica

Cosa è vero riguardo al tag HTML <map> come descritto nella pagina web collegata?

Il tag HTML <map> è usato per creare una mappa immagine.Il tag <map> non è supportato in HTML5.Il tag <map> definisce una mappa immagine lato client. Una mappa immagine è un'immagine con aree cliccabili.Il tag <map> non può essere usato con elementi <area> per definire le aree cliccabili nella mappa immagine.L'elemento <map> non contiene uno o più elementi <area> che definiscono le aree cliccabili nella mappa immagine.

Come <map> si collega a un'immagine

Definire le regioni cliccabili con <area>