Skip to content

Como construir mapas de imagens sem um editor de mapas de imagens

31 de maio de 2021

O que saber

• Use uma imagem de tamanho normal que o navegador não redimensionará. Você também precisará de um editor de imagens e de um editor de HTML ou de texto. • Ao inserir a imagem, adicione um atributo extra para identificar as coordenadas do mapa. • Por exemplo: Gatinhos! Este artigo explica como criar mapas de imagens usando tags HTML em vez de um editor de mapas de imagens. A maioria dos editores de imagem mostra as coordenadas do mouse quando você aponta para a imagem, que são todos os dados de que você precisa para começar a trabalhar com mapas de imagem.

Jonathan Minster / Getty Images

Criação de um mapa de imagem

Para criar um mapa de imagens, primeiro selecione uma imagem que servirá de base para o mapa. A imagem deve ter “tamanho normal” – ou seja, você não deve usar uma imagem tão grande que o navegador a redimensionará. Ao inserir a imagem, você adicionará um atributo extra que identifica as coordenadas do mapa: Gatinhos!

class = “ql-syntax”> Ao criar um mapa de imagem, você está criando uma área que é clicável na imagem, portanto, as coordenadas do mapa devem estar alinhadas com a altura e largura da imagem selecionada. Os mapas suportam três tipos diferentes de formas:

  • rect – um retângulo ou figura de quatro lados
  • poli – um polígono ou figura com vários lados
  • círculo – um círculo

Para criar as áreas, você deve isolar as coordenadas específicas que pretende mapear. Um mapa pode consistir em uma ou mais áreas definidas na imagem que, ao serem clicadas, abrem um novo hiperlink. Para retângulo, você mapeia apenas os cantos superior esquerdo e inferior direito. Todas as coordenadas são listadas como x, y (acima, acima). Então, para o canto superior esquerdo 0,0 e o canto inferior direito 10,15 você digitaria 0,0,10,15. Em seguida, você o inclui no mapa:

Morris

class = “ql-syntax”>

Para polígono, você mapeia cada x, y coordene separadamente. O navegador da Web conecta automaticamente o último conjunto de coordenadas com o primeiro; qualquer coisa dentro dessas coordenadas faz parte do mapa.

Garfield

class = “ql-syntax”>

Círculo as formas requerem apenas duas coordenadas, como o retângulo, mas para a segunda coordenada, você especifica o raio ou a distância do centro do círculo. Portanto, para um círculo com o centro em 122.122 e um raio de 5, você escreveria 122.122,5:

Catbert

class = “ql-syntax”>

Todas as áreas e formas podem ser incluídas na mesma tag de mapa:

Morris

Garfield

Catbert

class = “ql-syntax”>

Considerações

Os mapas de imagens eram muito mais comuns na era da Web 1.0 dos anos 1990 até o início dos anos 2000 – mapas de imagens freqüentemente formavam a base da navegação de um site. Um designer criaria algum tipo de imagem para indicar itens de menu e, em seguida, definiria um mapa. Abordagens modernas encorajam o design responsivo e usam folhas de estilo em cascata para controlar a colocação de imagens e hiperlinks em uma página. Embora a tag de mapa ainda seja compatível com o padrão HTML, o uso de dispositivos móveis com formatos pequenos pode levar a problemas inesperados de desempenho com mapas de imagem. Além disso, problemas de largura de banda ou imagens quebradas questionam o valor de um mapa de imagem. Então, fique à vontade para continuar usando esta tecnologia estável e bem compreendida – sabendo que existem alternativas mais eficientes atualmente em voga com Web designers.