Etiqueta <map> HTML

Definição e uso

<map> elemento <map> é necessário um tag para definir o mapa de imagem. O mapa de imagem (image map, um tipo de navegação de imagem dividida) é uma imagem com áreas clicáveis.

<map> do atributo nameé igual ao elemento <img> do Atributo usemap relacionados, criando uma relação entre a imagem e o mapa.

<map> contém alguns Elemento <area>，define as áreas clicáveis no mapa de imagem.

Veja também:

Manual de Referência do HTML DOM:Objeto Mapa

Exemplo

Exemplo 1

Mapa de imagem com áreas clicáveis:

<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>

Experimente pessoalmente

Exemplo 2

Outra imagem de mapa interativo com áreas clicáveis:

<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>

Experimente pessoalmente

Atributo

Atributo Valor Descrição
name Nome do mapa Obrigatório. Define o nome do mapa de imagem.

Atributos globais

<map> A etiqueta também suporta Atributos globais no HTML.

Atributos de evento

<map> A etiqueta também suporta Atributos de evento no HTML.

Configurações CSS padrão

A maioria dos navegadores exibirá os seguintes valores padrão: <map> Elemento:

map {
  display: inline;
}

Suporte ao navegador

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Suporte Suporte Suporte Suporte Suporte