Gerador de image map: desenhe áreas clicáveis e gere o HTML | We.Inc
Desenhe retângulos, círculos e polígonos na sua imagem, dê a cada um link e texto alternativo e copie o HTML clássico de map e area ou uma versão SVG responsiva.
Gerador de image map
Um image map transforma partes de uma mesma imagem em links separados. Carregue uma imagem, arraste para desenhar retângulos ou círculos, clique nos pontos para criar polígonos e digite um link e um texto alternativo para cada área. Copie o HTML clássico de map e area, ou uma versão SVG responsiva cujas áreas encolhem junto com a imagem no celular.
Formas de area e as suas coords
Significado
Cantos superior esquerdo e inferior direito
Centro e raio
Cada canto em ordem; a forma se fecha sozinha
(nenhuma)
Tudo o que não está coberto por outra área
Plantas baixas, diagramas de produto, fotos de equipe e mapas muitas vezes precisam de vários links dentro de uma única imagem. Desenhar as áreas no olho é muito mais rápido que medir pixels, e a sua imagem nunca sai do seu computador: ela é lida no navegador e só o tamanho dela é usado no código.
Use a planta baixa de exemplo ou escolha um arquivo de imagem seu. As coordenadas são medidas nos pixels reais da imagem, mesmo quando a prévia aparece reduzida.
Escolha Retângulo ou Círculo e arraste sobre a imagem, ou escolha Polígono, clique em cada canto e depois em Concluir polígono.
Edite o link, o texto alternativo e as coordenadas de cada área na lista. Coordenadas digitadas atualizam o desenho, o que também permite montar um mapa só pelo teclado.
Copie o HTML clássico ou o SVG responsivo. Troque o caminho da imagem no código pelo local onde o arquivo vai ficar no seu site.
Toda área com href precisa de texto alternativo. É o que os leitores de tela anunciam, então escreva o destino, como Reservar uma mesa no café.
As coordenadas do image map clássico são pixels CSS fixos. Se o CSS reduzir a imagem no celular, as áreas ficam onde estavam, então use a saída em SVG para layouts fluidos.
Deixe as regiões clicáveis grandes o bastante para tocar com conforto, e evite áreas que se encostam sem nenhum espaço.
Não esconda o único caminho para uma página dentro de uma imagem. Repita os links importantes como texto normal em algum lugar próximo.
Perguntas frequentes
Como ligo o map à imagem?
Dê um nome ao map e defina o usemap da img com o mesmo nome precedido de #, por exemplo usemap="#site-map" e map name="site-map". O gerador escreve os dois para você.
Os image maps em HTML são responsivos?
Não por conta própria. As coordenadas são números em pixels CSS, então não acompanham uma imagem redimensionada pelo CSS. A saída em SVG resolve isso com um viewBox, que escala a imagem e as formas dos links juntas.
A minha imagem é enviada para algum lugar?
Não. O arquivo é aberto com uma object URL local para que o navegador possa exibi-lo e ler a largura e a altura. Nada é enviado ao We.Inc nem a ninguém.
As áreas podem se sobrepor?
Podem. Onde duas áreas se sobrepõem, a que aparece primeiro no map fica com o clique, então coloque as áreas menores antes das maiores que as envolvem.
Map clássico ou links em SVG
O par map e area funciona nos navegadores há décadas e mantém a imagem como uma img normal, o que é simples para ferramentas de conteúdo. O ponto fraco são as coordenadas fixas.
A versão em SVG desenha a imagem dentro de um elemento svg e envolve cada forma em um link. Como tudo compartilha um mesmo viewBox, as áreas escalam perfeitamente, e você pode adicionar um contorno no hover com CSS nas formas.
Imagens clicáveis acessíveis
Dê à própria imagem um texto alternativo que descreva a imagem inteira, e a cada área um texto alternativo com o nome do destino. Quem usa teclado passa pelas áreas com Tab na ordem do código, então liste-as em uma ordem de leitura que faça sentido.
Teste navegando com Tab pelo resultado. Se a ordem do foco pular pela imagem, reordene as linhas da lista antes de copiar.
Código da planta baixa de exemplo
Estas são as duas saídas que o gerador escreve para as quatro áreas de exemplo.
Map e area clássicos
Funciona em qualquer lugar no tamanho natural da imagem, de 600 por 360 pixels.
Links em SVG responsivo
O viewBox corresponde ao tamanho da imagem, então cada forma de link escala junto com a imagem.
Área {n}
Desenhe as suas áreas
Desenhe retângulos, círculos e polígonos na planta baixa de exemplo ou na sua própria imagem e defina um link e um texto alternativo para cada área.
Sua imagem
Ferramenta de desenho
Retângulo
Círculo
Polígono
Concluir polígono
Cancelar
Tamanho da imagem: {w} × {h} pixels.
Clique em cada canto e depois em Concluir polígono.