HTML

Mapas de imagem com HTML

Mapas de imagem, são uma nova forma de navegação que incorpora uma série de links dentro de uma imagem.
Estes links são definidos por figuras geométricas e funcionam como os outros links.
O uso destes mapas deve ser acompanhado de um texto que explique ao usuário a sua função, através de frases como "clique sobre o ícone x para ver a informação y".
Por outro lado, não é demais introduzir essa explicação no atributo alt.

Um mapa de imagem é composto por duas partes, a imagem dentro da etiqueta <body> e um código no interior da etiqueta <map>, que delimitará por meio de linhas geométricas invisíveis cada uma das áreas dos links presentes na imagem.
As figuras geométricas que delimitam os links, devem ser definidas por meio de coordenadas.
A imagem é definida por largura (X) e altura (Y).
A esquina superior esquerda corresponde à posição 0,0 e a esquina inferior direita corresponde às coordenadas X,Y.

Para sabermos que coordenadas correspondem a um determinado ponto da nossa imagem o melhor é recorrer a um programa como o Photoshop por exemplo.

A melhor forma de explicar é com um exemplo.
Suponhamos que temos uma imagem com um mapa.
Dentro dela queremos um link a cada um dos elementos que a compõem.
Para isso, definimos os links como figuras geométricas (circle, poly ou rect) de tamanho pequeno distribuído ao comprimento e largura da imagem.

Exemplo: (para este exemplo crie no Paint e use uma imagem idêntica à apresentada abaixo com uma dimensão de 600 por 150pixels em que cada circulo apresenta 100 por 100 pixels e um espaço entre si de aproximadamente 57 pixels).

<table border="0" width="450">
<tr>
<td align="center">
<map name="mapa1">
<area alt="Clique para ver p1" shape="circle" coords="44,36,29" href="#">
<area alt="Clique para ver p2" shape="circle" coords="140,35,31" href="#">
<area alt="Clique para ver p3" shape="circle" coords="239,37,30" href="#">
<area alt="Clique para ver p4" shape="circle" coords="336,36,31" href="#">
</map>
<img src="imagem1.jpg" width="380" height="72" alt="Clique nos círculos" border="0" usemap="#mapa1">
<br> Clique nos círculos.</td>
</tr>
</table>

<area> apresenta os seguinte atributos:

Alt, permite mostrar um texto quando colocamos o cursor sobre a área.

Shape, Indica o tipo de área (circle, poly ou rect).

Coords, indica as coordenadas que localizam a área na imagem, é um grupo de valores numéricos distintos mediante o tipo de área (shape) que escolhemos.

Href, indica o link correspondente à área.
Noref, define a área não clicável da imagem.

No exemplo acima usamos áreas circulares (shape="circle"), que se definem indicando o centro do círculo (X,Y) e o radio (é um número inteiro que corresponde ao número de pixels compreendido desde o centro até a borda do círculo.

Existem três tipos de áreas distintas:

Rect, cria uma área retangular.
Para defini-la utiliza as coordenadas dos pontos da esquina superior esquerda e da esquina inferior direita, da forma como nomeamos as coordenadas na figura abaixo.

Podemos usar a seguinte linha de código para o efeito.

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

Circle, cria uma área circular, para defini-la utiliza as coordenadas do centro do círculo e o radio.
de acordo com nosso desenho, a linha de código de uma área circular.

Podemos usar a seguinte linha de código para o efeito.

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

Poly, Esta área, é a mais complexa.
Define-se um polígono indicando todos os seus pontos, mas, temos que indicá-los por ordem, seguindo o caminho marcado pelo perímetro do polígono.
O desenho abaixo ajuda a exemplificar, usando os nomes que demos aos pontos do polígono.

Podemos usar a seguinte linha de código para o efeito.

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


0|1|2|3|4|5|6|7|8|9|10|11|12|13|14