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 um editor de HTML ou texto.
• Ao inserir a imagem, adicione um atributo extra para identificar as coordenadas do mapa.
• Por exemplo:
Este artigo explica como criar mapas de imagem usando tags HTML em vez de um editor de mapa de imagem. A maioria dos editores de imagem mostrará as coordenadas do mouse quando você apontar na imagem, que são todos os dados necessários para começar a usar mapas de imagem.
Criando um Mapa de Imagem
Para criar um mapa de imagem, primeiro selecione uma imagem que servirá como base do mapa. A imagem deve ter "tamanho normal", ou seja, você não deve usar uma imagem tão grande que o navegador a dimensione.
Ao inserir a imagem, você adicionará um atributo extra que identifica as coordenadas do mapa:
Ao criar um mapa de imagem, você está criando uma área clicável na imagem, portanto, as coordenadas do mapa devem estar alinhadas com a altura e a largura da imagem selecionada. Os mapas suportam três tipos diferentes de formas:
- retângulo ou figura de quatro lados
- poli-um polígono ou figura multifacetada
- 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, quando clicadas, abrem um novo hiperlink.
Para um 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. Você então inclui no mapa:
Para um polígono, você mapeia cada coordenada x, y separadamente. O navegador da Web conecta automaticamente o último conjunto de coordenadas com o primeiro; qualquer coisa dentro dessas coordenadas faz parte do mapa.
As formas de círculo 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. Então, para um círculo com o centro em 122, 122 e um raio de 5 você escreveria 122, 122, 5:
Todas as áreas e formas podem ser incluídas na mesma tag de mapa:
Considerações
Os mapas de imagem eram muito mais comuns na era da Web 1.0 da década de 1990 até o início dos anos 2000 - mapas de imagem geralmente formavam a base da navegação de um site. Um designer criaria algum tipo de imagem para indicar os itens do menu e, em seguida, definiria um mapa.
Abordagens modernas incentivam o design responsivo e usam folhas de estilo em cascata para controlar o posicionamento de imagens e hiperlinks em uma página.
Embora a tag map ainda seja suportada no 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, sinta-se à vontade para continuar usando essa tecnologia estável e bem compreendida, sabendo que existem alternativas mais eficientes atualmente em voga entre os web designers.
