Mapas de imagens com HTML

Explicamos detalhadamente o processo para criar mapas de imagens, ou seja, imagens que têm vários links associados em distintas áreas.

Por Miguel Angel Alvarez - Tradução de JML


Publicado em: 03/8/04
Valorize este artigo:
Nos capítulos anteriores nos aprofundamos no elemento básico de navegação do web: O link hipertexto. Vimos que estes links são palavras, textos ou imagens que, ao clicar sobre eles, nos enviam a outras páginas ou zonas.

Os mapas de imagem são uma nova exposição de navegação que incorpora uma série de links dentro de uma mesma imagem. Estes links são definidos por figuras geométricas e funcionam exatamente da mesma forma que os outros links. Pode-se ver o funcionamento de um neste link.

À princípio, estes mapas não eram diretamente reconhecidos pelos navegadores e recorriam à tecnologias de lado do servidor para serem visualizados. Hoje em dia podem ser implementados por meio de código HTML tal como veremos neste capítulo.

Podemos utilizar estes mapas, por exemplo, em portais onde tornamos conhecida cada uma das sessões do site por meio de uma imagem. Também pode ser muito prático, em mapas geográficos onde cada cidade, estado ou ponto qualquer representa um link a uma página.

Em qualquer caso, o uso destes mapas tem de ser sistematicamente acompanhado de um texto explicativo que dê a entender ao usuário sobre os distintos pontos da imagem. Frases como "Dê um clique sobre tal ícone para acesar a tal informação". São muito indicativas na hora de fazer intuitiva a navegação pelos mapas de imagens. Por outro lado, não é demais introduzir essa mesma explicação no atributo alt da imagem.

Sendo assim, um mapa de imagem está composto por duas partes:
  • A imagem propriamente dita que estará situada como de costume dentro da etiqueta <body> de nosso documento HTML.
  • Um código, situado no interior da etiqueta <map>, que delimitará por meio de linhas geométricas imaginárias cada uma das áreas dos links apresentados na imagem.
Imagem que ilustra o manejo de coordenadas em imagens As linhas geométricas que delimitan os links, ou seja, as áreas dos links, devem ser definidas por meio de coordenadas. Cada imagem é definida por umas dimensões de largura (X) e altura (Y) e cada ponto da imagem pode ser definido portanto, dizendo a que altura (x) e largura (y) nos encontramos. Deste modo, a esquina superior esquerda corresponde à posição 0,0 e a esquina inferior direita corresponde às coordenadas X,Y. Se desejamos saber quais coordenadas correspondem a um ponto concreto de nossa imagem, o melhor é utilizar um programa de desenho gráfico como Photoshop ou Paint Shop Pro.

A melhor forma de explicar o funcionamento deste tipo de mapa é a partir de um exemplo prático. Suponhamos que temos uma imagem com um mapa como esta:

Clique para ver a página de meus amigos Clique para ver minha namorada Clique para conhecer minha família Clique para conhecer meu trabalho Mapa de imagens. Clique em cada um dos círculos.
Clique nos círculos para acessar às seções!

Dentro dela queremos introduzir um link a cada um dos elementos que a compõem. Para isso, definiremos nossos links como zonas circulares de tamanho pequeno que serão distribuídas ao comprimento e largura da imagem.

Vejamos a seguir o código que utilizaremos:

<table border=0 width=450><tr><td align="center">
<map name="mapa1">
<area alt="Clique para ver a página de meus amigos" shape="CIRCLE" coords="44,36,29" href="#">
<area alt="Clique para ver minha noiva" shape="CIRCLE" coords="140,35,31" href="#">
<area alt="Clique para conhecer minha família" shape="circle" coords="239,37,30" href="#">
<area alt="Clique para conhecer meu trabalho" shape="CIRCLE" coords="336,36,31" href="#">
</map>
<img src="../../../../docs/artigos/imagens/mapa1.gif" width="380" height="72" alt="Mapa de imagens. Clique em cada um dos círculos." border="0" usemap="#mapa1">
<br>
Clique nos círculos para acessar às seções!
</td></tr></table>


Nota: Os href das áreas vão a #
Este é um exemplo parcial de utilização dos mapas, faltaria colocar os href com valores reais e não com a #. Cada um dos links das áreas -atributo href da etiqueta <area>- deveriam levar a uma página web. O exemplo ficaria completo se criássemos todas as páginas onde linkar as áreas e colocássemos os href dirigidos para tais páginas. Como não fizemos as páginas "destino" colocamos links que não levam a lugar nenhum, que, como se pode ver, indica-se com o caráter "#".

É possível observar, tal como explicamos antes, que nosso mapa consta de duas partes principais: a imagem e a etiqueta <map> que define as áreas de cada link.

Cada área se indica com uma etiqueta <area>, que tem os seguinte atributos:

alt
Para indicar um texto que será mostrado quando situarmos o mouse na área.

shape
Indica o tipo de área.

coords
As coordenadas que definem a área. Será um grupo de valores numéricos distintos dependendo do tipo de área (shape) que estivermos definindo.

href
Para indicar o destino do link correspondente à área.

Neste caso utilizamos umas áreas circulares (shape="CIRCLE"), que se definem indicando o centro do círculo -uma coordenada (X,Y) e o radio, que é um número inteiro que se corresponde com o número de pixels desde o centro até a borda do círculo.

Tipos de áreas: shape distintas.

Distintos tipos de áreas. Shape distintas. Existem três tipos de áreas distintas, suficientes para fazer quase qualquer tipo de figura. No desenho que acompanha estas linhas pode ser visto uma representação das áreas, que detalhamos a seguir.

shape="RECT"

Cria uma área retangular. Para defini-la utilizam-se as coordenadas dos pontos da esquina superior esquerda e da esquina inferior direita. Tal como estão nomeadas tais coordenadas em nosso desenho, a área teria a seguinte etiqueta:

<area shape="RECT" coords="X1,Y1,X2,Y2" href="#">

shape="CIRCLE"

Cria uma área circular, que se indica com a coordenada do centro do círculo e o radio. De acordo com nosso desenho, a etiqueta de uma área circular teria esta forma:

<area shape="CIRCLE" coords="X1,Y1,R" href="#">

shape="POLY"

Este tipo de área, poligonal, é a mais complexa de todas. Um polígono fica definido indicando todos seus pontos, mas atenção, pois temos que indicá-los em ordem, seguindo o caminho marcado pelo perímetro do polígono. Segundo nosso desenho e os nomes que demos aos pontos do polígono, a etiqueta <area> ficaria desta forma:

<area shape="POLY" coords=" X1,Y1, X2,Y2, X3,Y3, X4,Y4" href="#">





Comentários do artigo
Foram enviados 7 comentários ao artigo
6 comentários não revisados
1 comentário revisado:
Mapas de imagens, standard do HTML
Por: mar80
12/11/08
Olá amigos! uma pergunta: os mapas de imagens... continuan sendo um standard do HTML?

Usuários :    login / registro

Manuais relacionados
Categorias relacionadas
O autor

Home | Sobre nós | Copyright | Anuncie | Entrar em contato