E aí, galera! Preparados pra dar um “up” nas imagens dos seus sites? Hoje a gente vai bater um papo super tranquilo sobre Mapas de Imagens HTML. Pensa assim: nós não estamos só aprendendo umas tags, estamos entendendo como a coisa funciona de um jeito tão claro que até uma criança sacaria (ou quase!).
Com eles, você transforma uma imagem em várias áreas clicáveis. Cada pedacinho da imagem pode levar o visitante para uma página diferente, abrir um vídeo ou até rodar um JavaScript. E o melhor: o Google adora esse tipo de interação!
O Que é um Mapa de Imagem HTML?
Imagina uma imagem como um mapa de verdade, cheio de “zonas” importantes. Com o HTML, você pode marcar essas zonas com pontos de clique. O segredo está em duas tags:
<map>— define o mapa.<area>— define cada área clicável.
É como se a <map> fosse o cérebro e as <area> fossem os pontos sensíveis da imagem.
Como Criar um Mapa de Imagem HTML
Vamos ver na prática como isso funciona?
1. A Imagem com Link (usando usemap)
A tag <img> continua a mesma, só que você adiciona o atributo usemap, que conecta a imagem com o mapa que você vai criar depois.
<img src="workplace.jpg" alt="Meu espaço de trabalho" usemap="#deskMap">
2. Criando o Mapa com <map>
A tag <map> precisa de um nome (sem o #). Esse nome tem que ser igual ao do usemap.
<map name="deskMap">
<!-- Áreas vão aqui -->
</map>
Definindo as Áreas Clicáveis com <area>
Agora vem a parte divertida: dizer exatamente onde cada clique deve acontecer.
Formatos disponíveis (shape):
rect: retângulo.circle: círculo.poly: polígono (forma livre).default: a imagem toda vira um link.
Você também precisa informar as coordenadas (em pixels), com o atributo coords.
Retângulo
<area shape="rect" coords="34,44,270,350" href="pagina-do-computador.htm" alt="Link para a página sobre computadores">
Imagina que sua imagem é uma folha quadriculada. As coordenadas são como dizer: “começa aqui nesse quadradinho e vai até aquele outro”. O retângulo vai do ponto (34,44) até (270,350).
Exemplo com Círculo
<area shape="circle" coords="337,300,44" href="pagina-do-cafe.htm" alt="Link para informações sobre café">
Aqui, você diz onde está o centro do círculo e qual o raio dele.
Com Forma Livre (Polígono)
<area shape="poly" coords="140,121,181,116,204,160,204,222,191,270,140,329,85,355,58,352,37,322,40,259,103,161,128,147" href="pagina-do-croissant.htm" alt="Link para a página do croissant">
💡 Dica: use ferramentas online para pegar essas coordenadas! É bem mais fácil do que sair contando pixel por pixel. Uma que é bem fácil é: https://www.fla-shop.com/image-map/ – https://www.image-map.net/
Veja esse exemplo funcionando
Interatividade com JavaScript
Quer ir além dos links? Dá pra fazer uma <area> rodar código JavaScript usando onclick
<area shape="circle" coords="337,300,44" href="#" onclick="mostrarMensagem()" alt="Clica pra ver um recado sobre café!">
<script>
function mostrarMensagem() {
alert("Você clicou na xícara!");
}
</script>
Agora a pessoa clica na xícara e… Surpresa! Aparece um alerta na tela.
Por Que Usar Mapas de Imagem?
- Melhora a usabilidade: o visitante interage mais com a imagem.
- Ajuda na acessibilidade: cada área pode ter um
altbem descritivo. - É bom pro SEO: o Google entende melhor o que tá acontecendo na imagem.
- É legal!
Checklist para Usar Mapas de Imagem (e o SEO Ficar Feliz):
✅ Use <map> com um name exclusivo.
✅ Use <area> com shape, coords, href e alt.
✅ No <img>, use usemap="#nomeDoMapa".
✅ Capriche nos alt — isso conta muito pro SEO!
✅ Use onclick se quiser interações extras.
✅ Teste no celular e no desktop pra garantir que os cliques funcionam bem.
Conclusão
Os mapas de imagem HTML são uma maneira simples e poderosa de transformar imagens comuns em áreas interativas. E com um toque de criatividade, você pode melhorar a experiência do usuário e ainda dar uma forcinha pro seu site aparecer melhor no Google.
Experimenta no seu projeto e depois me conta como ficou! Se tiver dúvidas, comenta aqui que eu te ajudo!
