HTML map: Como criar imagens clicáveis em HTML

HTML map é o nome dado a uma imagem ou vídeo que possui diversas áreas clicáveis que redirecionam os usuários a URLs internos ou externos. As áreas com links nesse tipo de mapa são criadas a partir de coordenadas específicas e associadas a URLs ou endereços web.

O que é HTML map?

HTML map (também chamado de map image HTML) é uma imagem clicável que aumenta o nível de intuitividade e interatividade com os usuários. Mais especificamente, o HTML map é usado para inserir diversos links e áreas clicáveis em imagens e vídeos de um documento HTML. As áreas referenciadas podem incluir subpáginas, hyperlinks para URLs internos ou externos ou links para downloads. Assim que o usuário clica no elemento, o conteúdo é exibido ou ações específicas são acionadas.

A tag HTML <map> é usada para gerar mapas de imagem. Já a tag <img> HTML é usada para integrar esses mapas.

Caso não queira criar seu próprio HTML map, você pode recorrer aos geradores de mapas de imagem. Essas ferramentas on-line permitem que o usuário envie uma imagem e defina em quais áreas inserir os links.

Por que criar HTML map?

Você pode integrar um mapa de imagem a qualquer documento HTML após definir suas respectivas áreas de referência. A vantagem de usar mapas de imagem é que eles permitem criar links para múltiplos destinos dentro de uma mesma imagem ou vídeo. Um HTML map pode ser usado em:

• Mapas com áreas clicáveis de regiões, cidades, empresas ou estações
• Imagens de receitas com informações adicionais sobre os ingredientes
• Banners de anúncios com links para diferentes produtos, categorias ou serviços
• Exibições de informações adicionais ou publicidades em vídeos
• Sites com mapas de imagem com múltiplos elementos de navegação
• Exibições de diversos modelos, funções ou níveis em jogos on-line

Como criar HTML map?

O elemento HTML <map> é usado para gerar um mapa de imagem. Ao criar este elemento, você precisa incluir o atributo name para fazer uma referência ao mapa. Com o nome do mapa, é possível implementar ancoragens, criar links ou fazer referências a áreas específicas de uma imagem ou vídeo. Mais adiante, detalharemos como você pode especificar as coordenadas dessas áreas.

Um HTML map pode ser posicionado em qualquer parte de um documento HTML. Para fazer isso, defina as áreas e coordenadas (coords) que especificam a posição, o tamanho e o formato da área de referência. Essas áreas podem ser inseridas em uma imagem na forma de um retângulo, polígono ou círculo. As coordenadas variam conforme o formato da área de referência, sendo expressas de maneira diferente para retângulos, círculos e polígonos.

Use o atributo HTML <area> para definir áreas individuais no mapa de imagem. É necessário incluir pelo menos um atributo area para criar esse tipo de mapa. Use os atributos HTML a seguir para especificar as propriedades do mapa de imagem e suas respectivas áreas de referência:

• shape: O atributo shape define o formato das áreas clicáveis em uma imagem. Você pode escolher entre rect (retângulo), circle (círculo) e poly (polígono). A sintaxe de um retângulo é rect = x1,y1,x2,y2, em que x1 e y1 definem as coordenadas do canto superior esquerdo, enquanto x2 e y2 sinalizam o canto inferior direito. Para um círculo, a sintaxe é circle = xc,yc,raio. No caso de polígonos, use poly = x1,y1,x2,y2,x3,y3 ….
• coords: O atributo coords especifica as coordenadas em pixels que definem a área clicável. Essas coordenadas costumam ser determinadas quando se usa um editor gráfico.
• href: O atributo href define o link da área clicável para um URL interno ou externo.
• alt: O atributo alt define um texto alternativo que será exibido caso o mapa de imagem não carregue corretamente, garantindo a acessibilidade do conteúdo. Esse recurso é especialmente útil para navegadores que funcionam apenas com textos e usuários com deficiência.
• title: O atributo title adiciona uma breve descrição que é exibida quando o usuário passa o mouse sobre a respectiva área da imagem.
• img: A tag img é usada para incorporar e exibir uma imagem em um documento HTML.

Como integrar HTML map a página web?

Após configurar o mapa, você poderá incorporá-lo no local desejado em seu site usando a tag HTML <img>. Para criar um link no mapa de imagem e torná-lo funcional, é necessário inserir o elemento <map>. O código a seguir exemplifica como fazer essa implementação:

<img src="imagem-praia.jpg" usemap="#html-map">
<map name="html-map">
    <area target="_blank" alt="praia" title="praia" href="https://exemplo.com/praia" coords="1,928,3260,1834" shape="rect">
    <area target="_blank" alt="oceano" title="oceano" href="https://exemplo.com/oceano" coords="3263,556,7,919" shape="rect">
    <area target="_blank" alt="céu" title="céu" href="https://exemplo.com/ceu" coords="3263,510,10,0" shape="rect">
</map>

Definimos três áreas clicáveis na imagem abaixo: praia, oceano e céu. Quando os usuários clicam nessas áreas, eles são automaticamente redirecionados às respectivas landing pages, que são abertas em novas janelas.

Close