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 ismapatributo.

<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:

  1. 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).
  2. 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> tagdefinição de qual URL deve ser aberto para um link da web comum. Um titleatributo 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 um altatributo 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

An unknown portrait unknown painting prob. The Infant Academy 1782 Boswell - Biographer Dr Johnson - Dictionary writer Sir Joshua Reynolds - Host David Garrick - actor Edmund Burke - statesman Pasqual Paoli - Corsican patriot Charles Burney - music historian servant - poss. Francis Barber Thomas Warton - poet laureate Oliver Goldsmith - writer Use button to enlarge or use hyperlinks
Exemplo de mapa de imagem do Clube . Clicar em uma pessoa na imagem faz com que o navegador carregue o artigo apropriado.

É 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.

Veja também

Referências