Mapeando Imagens

1. O que é mapear imagem?

Bom, é bem comum você pegar uma imagem e colocar um link que será acessado ao clicar nela, certo? Nesse caso, porém, você só tem um link para o qual será direcionado ao clicar em qualquer lugar dessa imagem. Então, mapear significa pegar uma imagem e adicionar mais de um link nela, dependendo do local da imagem onde for clicado. Por exemplo, você pode pegar a imagem de uma pessoa, colocar um link na cabeça, outro no braço esquerdo, outro link no pé direito, etc. As possibilidades são variadas.

2. Como mapear?

O nome "mapear" já sugere alguma coisa. Em cada imagem é necessário ter as coordenadas do local onde deseja colocar um link. E isso não é uma coisa simples de se fazer sem as ferramentas adequadas. Você precisará de algum programa de ultima geração, como o Paint (tô sendo ironico, heim).

Abrindo uma imagem no paint é só correr o cursor por ela para aparecer uma dupla de numeros no canto inferior da página. Algo assim: 199x134px
O primeiro numero vai variar conforme movimenta o cursor do mouse na horizontal, enquanto o segundo varia com movimentos verticais. Juntos eles marcam a coordenada exata onde o cursor está. Então, você pode utilizar a ferramenta de desenho, forma geométrica ou o que achar melhor para desenhar um quadrado ou retângulo em cima da área onde deseja colocar um link na imagem. Agora atenção! As coordenadas que interessam são apenas duas, a do canto superior direito e a do canto inferior esquerdo.

3. O Código

É simples:

O que alterar?
O link da imagem pelo endereço da sua figura.
O nome do mapa, perceba que ele aparece na primeira e segunda linha do código. Os dois devem ter o mesmo nome.
As coordenadas, pelos numeros que você mesmo achou.
O endereço dos links, para onde será direcionado quando clicar em determinada área da imagem.

E é isso, simples assim. Claro, também dá de fazer formas poligonais ou circulos, mas fico devendo para outra oportunidade.

4. E o jeito simples de fazer tudo isso?

É, tem. Existe o site Image Maps.com que te ajuda a pegar as coordenadas e o código online, sem precisar de programas.

Como exemplo eu vou usar o banner do Forum Central, que vai distorcer a página, mas faz parte do aprendizado. Se você veio do futuro provavelmente a skin já terá mudado, mas o banner atual é este, com o link que vai pro concurso de skins ao invés de ir pra página inicial:



No site eu coloco a imagem e clico em "Start Mapping Your Image". Voilá, a imagem é hospedada e clico em "continue to next step" pra começar a mapeá-la. Na barra da direita escolho se quero um retângulo ou um custom shape (uma forma geométrica com quantos lados você quiser. Algo mais "torto").
Escolho um retângulo e adiciono o link da página inicial onde fica escrito "Forum Central" na imagem. Deixo o link para o concurso em outro retângulo apenas no texto embaixo do título, bem onde tá escrito mesmo "clique aqui para saber mais". E de abusado uso um custom shape pra colocar um link pro meu perfil lá no canto da imagem, onde tem a faixa verde com "2 anos". Pronto, agora vou pegar o código. Desmarque todas as caixinhas da barra da direita. Como sou mau, desmarco todas mesmo, nada de backlink!. Clico em "Get Your Code" e pronto.

Na página seguinte clique em "HTML Output" pra conferir como ficou a imagem com os links. Clicando em "HTML Code" você pega o código, que já pode colocar no seu forum. O meu ficou assim:

Você pode usar mapeamento de imagens pra colocar links em banners, imagens da sidebar, imagens em tópicos, assinaturas, etc. Só lembre-se de que isso é um código html, pra utilizá-lo em tópicos e assinaturas você deve estar habilitado para utilizar [dohtml] no seu forum. Mas isso é outra história.

Boa Geider o/
Só uma duvida:

128x132 são as do canto superior direito e 241x179 do inferior esquerdo? o contrário? tudo misturado?

Banners e demais imagens mapeadas aparecendo em todos os fóruns em 5, 4, 3...

eu "mapeio" as minhas imagens no photoshop. ou melhor, no images que vem junto do photoshop... fiz isso no banner do "bad things" e ficou ótimo!

Na verdade 128,132 é do canto superior esquerdo. Pelo paint eu sempre pegava a diagonal inferior esquerdo-superior direito, mas no site ele pega a superior esquerdo-inferior direito. Vejo que não importa qual a diagonal, contanto que pegue um de cima de um lado e um debaixo do outro lado.

Pra melhor visualizar, marquei as coordenadas que o site usou pra mapear essa imagem:



Que são as seguintes:

ImageReady, Kitty? Ensina ai se for mais fácil.

aham! esse mesmo... tipo ele é mais ou menos não é tão fácil assim... Vou ver se consigo elaborar alguma coisa e mais tarde eu posto!