Tag HTML <map>

Definizione e uso

<map> richiede un tag per definire una immagine mappa. L'immagine mappa (image map, una mappa di navigazione divisa) è un'immagine con aree cliccabili.

<map> un elemento proprietà nameche corrisponde alla elemento <img> del Proprietà usemap correlate, creando una relazione tra l'immagine e la mappa.

<map> contiene alcune Elemento <area>，definisce l'area cliccabile di una immagine mappa.

Vedi anche:

Manuale HTML DOM:Oggetto Map

Esempio

Esempio 1

Immagine mappa con aree cliccabili:

<img src="life.png" alt="Life" usemap="#lifemap" width="650" height="451">
<map name="lifemap">
  <area shape="rect" coords="10,208,155,338" alt="AirPods" href="airpods.html">
  <area shape="rect" coords="214,65,364,365" alt="iPhone" href="iphone.html">
  <area shape="circle" coords="570,291,75" alt="Coffee" href="coffee.html">
</map>

Prova tu stesso

Esempio 2

Un'altra immagine mappa con aree cliccabili:

<img src="solarsystem.png" width="1024" height="576" alt="Planets" usemap="#planetmap">
<map name="planetmap">
  <area shape="rect" coords="0,0,114,576" alt="Sun" href="sun.html">
  <area shape="circle" coords="190,230,5" alt="Mercury" href="mercury.html">
  <area shape="circle" coords="228,230,5" alt="Venus" href="venus.html">
</map>

Prova tu stesso

Proprietà

Proprietà Valore Descrizione
name Nome della mappa Obbligatorio. Specifica il nome dell'immagine della mappa.

Proprietà globali

<map> Il tag supporta anche Proprietà globali in HTML.

Proprietà degli eventi

<map> Il tag supporta anche Proprietà degli eventi in HTML.

Impostazioni CSS predefinite

La maggior parte dei browser mostrerà i seguenti valori predefiniti: <map> Elemento:

map {
  display: inline;
}

Supporto browser

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Supporto Supporto Supporto Supporto Supporto