Tag HTML map - Aprenda HTML

A tag HTML <map> define um mapa de imagem do lado do cliente — uma imagem cujas diferentes regiões apontam para destinos diferentes. Em vez de um único link para toda a imagem, você marca várias "zonas clicáveis" sobre ela. Cada zona é descrita por um elemento <area>, e todos os elementos <area> ficam dentro de um único <map>.

É chamado de mapa de imagem do lado do cliente porque o navegador interpreta e renderiza as regiões localmente — não é necessária nenhuma ida ao servidor para determinar qual região foi clicada.

Esta página explica como um <map> é vinculado à sua imagem, como definir as regiões clicáveis com <area>, os requisitos de acessibilidade e quando um mapa de imagem é (e não é) a ferramenta certa.

Como o `<map>` se conecta a uma imagem

Um <map> não faz nada por si só. Ele deve ser referenciado por uma imagem por meio de dois atributos que precisam corresponder:

No <map>: o atributo name, por exemplo <map name="planets">.
No <img>: o atributo usemap, que aponta para esse nome com um # inicial, por exemplo <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>

Regras de vinculação para ter em mente:

O prefixo # é obrigatório somente em usemap. O valor de name é escrito sem o #; o valor de usemap é escrito com ele (é uma referência de fragmento). name="planets" ↔ usemap="#planets".
Os valores diferenciam maiúsculas de minúsculas. usemap="#Planets" não corresponderá a name="planets".
O name deve ser único no documento e não pode estar vazio.
Os elementos <area> devem estar dentro do <map>. Um <area> colocado em outro lugar não terá efeito.

Se os nomes não corresponderem exatamente, a imagem simplesmente é renderizada sem regiões clicáveis e nenhum erro é exibido — um bug silencioso bastante comum.

Definindo regiões clicáveis com `<area>`

Cada região é um elemento <area>. Dois atributos descrevem sua geometria, e os demais descrevem o link:

Atributo	Finalidade
`shape`	Tipo de região: `rect`, `circle`, `poly` ou `default`.
`coords`	Coordenadas que definem a região, em pixels CSS.
`href`	URL de destino da região.
`alt`	Texto alternativo para a região (obrigatório quando `href` está presente).
`target`	Onde abrir o link (`_blank`, `_self`, etc.).

O significado de coords depende de shape:

Shape	Formato de `coords`	Significado
`rect`	`x1,y1,x2,y2`	Cantos superior esquerdo e inferior direito de um retângulo.
`circle`	`x,y,r`	Ponto central `x,y` e raio `r`.
`poly`	`x1,y1,x2,y2,x3,y3,…`	Uma lista de pontos formando um polígono (cada par é um vértice).
`default`	(nenhum)	Toda a imagem não coberta por outra área.

Todas as coordenadas são medidas a partir do canto superior esquerdo da imagem (0,0), em pixels, relativas ao tamanho intrínseco da imagem.

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

Sintaxe

A tag <map> vem em pares. O conteúdo é escrito entre as tags de abertura (<map>) e fechamento (</map>).

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

Experimente Você Mesmo »

Atributos

Atributos	Valor	Descrição
name	mapname	Define o nome de um mapa de imagem.

O elemento <map> também utiliza os Atributos Globais.

Acessibilidade

Os mapas de imagem são totalmente visuais, a menos que você os torne acessíveis, portanto algumas regras são importantes:

Todo <area> com link precisa de um alt significativo. Os leitores de tela anunciam cada área pelo seu texto alt, exatamente como fazem para links. Um alt vazio ou ausente em uma área clicável deixa o link sem rótulo.
Faça o alt descrever o destino, não a imagem. "Abrir a página de contato" é mais útil do que "círculo azul".
A navegação por teclado funciona automaticamente para áreas que possuem um href: cada uma se torna um link com foco, acessível via Tab. Evite colocar interatividade apenas em uma região sem href, pois ela não será acessível pelo teclado.
Não dependa de zonas clicáveis muito pequenas. Regiões pequenas ou com formatos irregulares são difíceis de clicar com mouse, toque ou ponteiro assistivo.

Quando usar (e quando não usar)

Os mapas de imagem do lado do cliente são um recurso antigo e ainda funcionam, mas se adequam apenas a um conjunto restrito de casos atualmente.

Uso razoável: uma única imagem raster (uma foto, um diagrama, uma planta baixa digitalizada) onde algumas regiões retangulares ou circulares precisam direcionar para algum lugar, e a imagem não será redimensionada de forma responsiva.

Evite <map> quando:

O layout for responsivo. Os valores de coords são pixels fixos vinculados ao tamanho intrínseco da imagem; eles não escalam quando a imagem é redimensionada com CSS, fazendo as zonas clicáveis saírem do lugar.
As regiões forem botões, menus ou qualquer coisa complexa. Construa-as com HTML/CSS de verdade.

Para a maioria das necessidades modernas, existem alternativas melhores:

Âncoras sobrepostas com CSS — posicione elementos <a> com posicionamento absoluto (em porcentagens) sobre uma imagem responsiva. Isso escala corretamente e é totalmente acessível.
<svg> inline — desenhe formas como elementos reais, escaláveis e estilizáveis e envolva cada forma clicável em um <a>. Esta é a opção mais flexível para diagramas e regiões complexas.

Veja também Links HTML para entender como âncoras e destinos de link funcionam.

Prática

O que é verdadeiro sobre a tag HTML <map> conforme descrito na página web vinculada?

A tag HTML <map> é usada para criar um mapa de imagem.A tag <map> não é suportada no HTML5.A tag <map> define um mapa de imagem do lado do cliente. Um mapa de imagem é uma imagem com áreas clicáveis.A tag <map> não pode ser usada com elementos <area> para definir as áreas clicáveis no mapa de imagem.O elemento <map> não contém um ou mais elementos <area> que definem as áreas clicáveis no mapa de imagem.

Como o <map> se conecta a uma imagem

Definindo regiões clicáveis com <area>