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 re­di­re­ci­o­nam os usuários a URLs internos ou externos. As áreas com links nesse tipo de mapa são criadas a partir de co­or­de­na­das es­pe­cí­fi­cas e as­so­ci­a­das 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 in­tui­ti­vi­dade e in­te­ra­ti­vi­dade com os usuários. Mais es­pe­ci­fi­ca­mente, o HTML map é usado para inserir diversos links e áreas clicáveis em imagens e vídeos de um documento HTML. As áreas re­fe­ren­ci­a­das podem incluir sub­pá­gi­nas, hy­per­links para URLs internos ou externos ou links para downloads. Assim que o usuário clica no elemento, o conteúdo é exibido ou ações es­pe­cí­fi­cas 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 fer­ra­men­tas 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 res­pec­ti­vas áreas de re­fe­rên­cia. 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 in­for­ma­ções adi­ci­o­nais sobre os in­gre­di­en­tes
• Banners de anúncios com links para di­fe­ren­tes produtos, ca­te­go­rias ou serviços
• Exibições de in­for­ma­ções adi­ci­o­nais ou pu­bli­ci­da­des 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 re­fe­rên­cia ao mapa. Com o nome do mapa, é possível im­ple­men­tar an­co­ra­gens, criar links ou fazer re­fe­rên­cias a áreas es­pe­cí­fi­cas de uma imagem ou vídeo. Mais adiante, de­ta­lha­re­mos como você pode es­pe­ci­fi­car as co­or­de­na­das dessas áreas.

Um HTML map pode ser po­si­ci­o­nado em qualquer parte de um documento HTML. Para fazer isso, defina as áreas e co­or­de­na­das (coords) que es­pe­ci­fi­cam a posição, o tamanho e o formato da área de re­fe­rên­cia. Essas áreas podem ser inseridas em uma imagem na forma de um retângulo, polígono ou círculo. As co­or­de­na­das variam conforme o formato da área de re­fe­rên­cia, sendo expressas de maneira diferente para re­tân­gu­los, círculos e polígonos.

Use o atributo HTML <area> para definir áreas in­di­vi­du­ais no mapa de imagem. É ne­ces­sá­rio incluir pelo menos um atributo area para criar esse tipo de mapa. Use os atributos HTML a seguir para es­pe­ci­fi­car as pro­pri­e­da­des do mapa de imagem e suas res­pec­ti­vas áreas de re­fe­rên­cia:

• 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 co­or­de­na­das 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 es­pe­ci­fica as co­or­de­na­das em pixels que definem a área clicável. Essas co­or­de­na­das costumam ser de­ter­mi­na­das 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 al­ter­na­tivo que será exibido caso o mapa de imagem não carregue cor­re­ta­mente, ga­ran­tindo a aces­si­bi­li­dade do conteúdo. Esse recurso é es­pe­ci­al­mente útil para na­ve­ga­do­res que funcionam apenas com textos e usuários com de­fi­ci­ên­cia.
• title: O atributo title adiciona uma breve descrição que é exibida quando o usuário passa o mouse sobre a res­pec­tiva área da imagem.
• img: A tag img é usada para in­cor­po­rar e exibir uma imagem em um documento HTML.

Como integrar HTML map a página web?

Após con­fi­gu­rar 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, é ne­ces­sá­rio inserir o elemento <map>. O código a seguir exem­pli­fica como fazer essa im­ple­men­ta­çã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 au­to­ma­ti­ca­mente re­di­re­ci­o­na­dos às res­pec­ti­vas landing pages, que são abertas em novas janelas.

Close