Mapa de imagem - Image map
Em HTML e XHTML , um mapa de imagem é uma lista de coordenadas relacionadas a uma imagem específica , criada para criar um hiperlink de áreas da imagem para destinos diferentes (em oposição a um link de imagem normal, em que toda a área da imagem está vinculada a um único destino). Por exemplo, um mapa-múndi pode ter cada país vinculado a mais informações sobre aquele país. A intenção de um mapa de imagem é fornecer uma maneira fácil de vincular várias partes de uma imagem sem dividir a imagem em arquivos de imagem separados.
Lado do servidor
Os mapas de imagem do lado do servidor foram suportados pela primeira vez no Mosaic (navegador da web) versão 1.1. Os mapas de imagem do lado do servidor permitem que o navegador da web envie informações posicionais ao servidor sobre onde o usuário clica em uma imagem. Isso permite que o servidor tome decisões pixel a pixel sobre qual conteúdo retornar em resposta (os métodos possíveis são usar camadas de máscara de imagem, consultas de banco de dados ou arquivos de configuração no servidor).
O código HTML para este tipo de mapa de imagem do lado do servidor requer que a <img>
tag esteja dentro de uma tag âncora <a>...</a>
e <img>
deve incluir o ismap
atributo.
<a href="/imagemapper"><img src="image.png" ismap /></a>
Quando o usuário clica dentro da imagem, o navegador anexa as coordenadas X e Y (em relação ao canto superior esquerdo da imagem) ao URL âncora como uma string de consulta e acessa o URL resultante (por exemplo, /imagemapper?3,9
).
Se o navegador não for compatível ismap
, a string de consulta não deve ser adicionada ao URL âncora e o servidor deve responder apropriadamente (por exemplo, retornando uma página de navegação somente texto).
Do lado do cliente
Os mapas de imagens do lado do cliente foram introduzidos no HTML 3.2 e não requerem nenhuma lógica especial para serem executados no servidor (eles são totalmente do lado do cliente). Eles também não requerem nenhum JavaScript .
HTML puro
Um mapa de imagem do lado do cliente em HTML consiste em duas partes:
- a imagem real, que é incorporada à
<img>
tag. A tag de imagem deve ter um atributo usemap, que nomeia o mapa de imagem a ser usado para esta imagem (vários mapas de imagem podem existir em uma única página). - Um
<map>
elemento, e dentro dele,<area>
elementos, cada um dos quais define uma única área clicável dentro do mapa de imagem. São semelhantes à<a> tag
definição de qual URL deve ser aberto para um link da web comum. Umtitle
atributo pode ser fornecido, que pode ser renderizado como uma dica de ferramenta se um usuário de desktop passar o ponteiro do mouse sobre a área. Por motivos de acessibilidade na web , muitas vezes é importante - e em alguns casos pode até ser uma exigência legal ou contratual - fornecer umalt
atributo descrevendo o link que o software leitor de tela pode ler, por exemplo, para usuários cegos .
Os <area>
elementos podem ser retângulos ( shape="rect"
), polígonos ( shape="poly"
) ou círculos ( shape="circle"
). Valores de forma são pares de coordenadas. Cada par tem um valor X e Y (da esquerda / parte superior de uma imagem) e é separado por uma vírgula.
- Retângulo: defina quatro coordenadas: "x1, y1, x2, y2"
- Polígono: defina quantas coordenadas desejar (um múltiplo de dois): "x1, y1, x2, y2, [...] xn, yn"
- Círculo: um par de coordenadas e outro valor com um raio: "x1, y1, raio"
O exemplo a seguir define uma área retangular ("9,372,66,397"). Quando um usuário clica em qualquer lugar dentro desta área, ele é levado à página inicial da Wikipedia em inglês .
<img src="image.png" alt="Website map" usemap="#mapname" />
<map name="mapname">
<area shape="rect" coords="9,372,66,397" href="https://en.wikipedia.org/" alt="Wikipedia" title="Wikipedia" />
</map>
CSS
Uma abordagem mais moderna é sobrepor links em uma imagem usando posicionamento absoluto CSS ; no entanto, isso só oferece suporte a áreas retangulares clicáveis. Essa técnica CSS pode ser adequada para fazer um mapa de imagem funcionar corretamente em iPhones , o que pode falhar ao redimensionar mapas de imagem HTML puros corretamente.
Criação e uso
É possível criar mapas de imagens do lado do cliente manualmente usando um editor de texto, mas isso requer que os web designers saibam como codificar HTML e também como enumerar as coordenadas das áreas que desejam colocar sobre a imagem. Como resultado, a maioria dos mapas de imagens codificados manualmente são polígonos simples.
Como a criação de mapas de imagens em um editor de texto exige muito tempo e esforço, muitos aplicativos foram projetados para permitir que os web designers criem mapas de imagens de forma rápida e fácil, da mesma forma que criariam formas em um editor de gráficos vetoriais . Exemplos desses aplicativos são Dreamweaver da Adobe ou KImageMapEditor (para KDE ), e o plugin de mapa de imagem encontrado no GIMP .
Os mapas de imagens que não tornam suas áreas clicáveis óbvias podem sujeitar o usuário a uma navegação misteriosa . Mesmo quando o fazem, para onde eles levam pode não ser óbvio. Isso pode ser parcialmente remediado com efeitos de rollover.
Imagens SVG
Como o formato de imagem Scalable Vector Graphics (SVG) oferece seus próprios mecanismos para adicionar hiperlinks e outras formas mais sofisticadas de interatividade às imagens, as técnicas tradicionais de mapa de imagem geralmente não são necessárias ao trabalhar com imagens vetoriais no formato SVG.