Os mapas de imagens são uma maneira interessante e interessante de animar seu site - com eles, você pode fazer upload de imagens e tornar partes dessas imagens clicáveis em outros recursos on-line. Se você está em apuros e não quer baixar um editor de mapa de imagens, criar um mapa usando tags HTML é simples.
Você precisará de uma imagem, um editor de imagens e algum tipo de editor de HTML ou editor de texto. A maioria dos editores de imagens mostra as coordenadas do seu mouse quando você aponta para a imagem. Esses dados de coordenadas são tudo o que você precisa para começar a usar mapas de imagens.
Criando um Mapa de Imagem
Para criar um mapa de imagens, primeiro selecione uma imagem que servirá de base para o mapa. A imagem deve ser "tamanho normal" - ou seja, você não deve usar uma imagem tão grande que o navegador a dimensione.
Quando você inserir a imagem, você adicionará um atributo extra que identifica as coordenadas do mapa:
Ao criar um mapa de imagem, você cria 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:
- rect - um retângulo ou figura de quatro lados
- poly - 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 retângulo , você mapeia apenas os cantos superior esquerdo e inferior direito. Todas as coordenadas estão listadas como x, y (over, up). 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 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.
Círculo 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. 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 imagens eram muito mais comuns na era da Web 1.0 da década de 1990, no início dos anos 2000 - os mapas de imagens geralmente 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.
As 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 do mapa ainda seja suportada no padrão HTML, o uso de dispositivos móveis com pequenos formatos pode levar a problemas inesperados de desempenho com mapas de imagem. Além disso, problemas de largura de banda ou imagens quebradas refletem o valor de um mapa de imagem.
Portanto, sinta-se à vontade para continuar usando essa tecnologia estável e bem compreendida - sabendo que existem alternativas mais eficientes atualmente en vogue com web designers.
