Rafael Paulino Desenvolvedor web e mobile

portfolio de Rafael Paulino desenvolvedor web e mobile

Blog - Imagens Mapeadas

Postado por Rafael Paulino - segunda-feira, 18 de março de 2013

Para que você entenda o que é uma imagem mapeada, você deve pensar em um quebra-cabeças e que cada peça desse quebra-cabeça nos leva a um lugar diferente.

A imagem de mapa é uma imagem comum que tem àreas (peças) definidas através de uma tag, e com isso você cria um link em cada uma dessas peças e pode usá-los para criar um menu de imagens,abrir uma janela pop-up, e tudo o que a sua imaginação mandar.

Para informar ao navegador que a sua imagem é uma imagem de mapa basta colocar o código abaixo:

<img src="mapa.jpg" border="0" ismap usemap="#exemplo1">

Explicando o código acima:

border=”0″ – Serve para retirar as bordas da imagem.
ismap – Informa ao navegador que a imagem é uma imagem de mapa.
usemap – Informa ao navegador qual mapa usar.

 

Agora que você criou a imagem de mapa falta você criar o mapa, ou seja falta você dividir a imagem em partes. Veja como fazer isso logo a seguir:

<map name="exemplo1">
<area coords="9,23,41,42" href="http://www.google.com.br" shape="rect" title="Esse link vai para o Google!" target="_blank">
</map>

Explicando o código acima:

<map name="exemplo1">

Informa ao navegador o nome do mapa.

 

area coords="9,23,41,42"

São às coordenadas x(horizontal) e y(vertical) do canto superior esquerdo e x(horizontal) e y(vertical) do canto inferior direito.

 

href=""

É o link para o qual a imagem enviará o usuário depois de clicado.

 

shape="rect"

É a forma do pedaço que divide a imagem, no caso o pedaço é em forma de retângulo. (Nota: Você também pode usar como valor o atributo circle que cria uma forma em circulo).

 

title=""

Coloca uma legenda na imagem (Isso aparece quando você passa o mouse em cima da imagem).

 

target="_blank"

Abre o link em uma nova janela.

 

As outras opções são:

_self – Mesma região onde foi clicado.
_top – Abre o link ocupando toda a janela.
_parent – quase igual ao _top só que ocupando a região original.

 

Exemplo do código por completo:

<img src="mapa.jpg" border="0" ismap usemap="#exemplo1">
<map name="exemplo1">
<area coords="0,0,110,70" href="http://www.google.com.br" shape="rect" title="Esse link vai para o Google!" target="_blank">
<area coords="110,70,220,165" href="http://www.uol.com.br" shape="rect" title="esse link vai para o UOL!" target="_blank">
</map>


Rafael Paulino

Rafael Paulino: Desenvolvedor web e mobile, atua na área desde 2008, apaixonado por esportes principalmente por corrida, musculação, natação e artes marciais. PHP - jQuery - Java Script - Ajax - XHTML5 - CSS - iOS

Veja também:



Recomende 

Entre em contato