Um exemplo de image map é aquele que apresento acima. Mesmo para quem não se lembrava é fácil agora associar a muitas que já viu enquanto navegava na Internet.
Trata-se de um belo efeito, no meu exemplo utilizado para permitir levar os visitantes para todos os meus blogs, duma forma gráfica mais apelativa, mas cujas utilizações estão apenas dependentes das necessidade e imaginação de cada um.
Ainda por cima é uma coisa que se faz num par de minutos, com a ajuda de um programa editor de imagens gratuito e tão bom como o milionário Adobe Photoshop. Falo, obviamente, do Gimp.
Então vamos lá ver como se faz tudo em 5 curtos passos.
Passo 1: Criar ou encontrar a imagem que quer utilizar
Partindo do princípio que, como eu, ainda não tem a imagem que quer usar como map, basta-lhe usar o Word, por exemplo, para inserir as várias imagens que vão servir à criação da image map.
Pode coloca-las na disposição que quiser:
Depois é só capturar a imagem que construiu.
Utilize, por exemplo, a tecla PrintScreen e depois abra a imagem no Paint.
Se pretender ser um pouco mais sofisticado, utilize um programa de captura de ecrã, por exemplo o MWSnap, que pode descarregar gratuitamente aqui.
Passo 2: Criação do mapeamento da imagem
Tendo já a imagem mapa criada, abra-a no Gimp.
Clique em Filter >> Web >> Image Map
Abrir-se-á uma janela nova, que é aquela em que irá trabalhar, isto é, criar a sua image map.
Faça então agora:
Mapeamento >> e escolha a figura geométrica com que quer recortar a sua imagem.
Tem disponível Flecha, Rectângulo, Círculo e Polígono.
À medida que vai recortando a imagem nos vários pedaços, em cada pedaço a que proceda ao corte, surgir-lhe-à de imediato uma outra janela onde deve colocar o URL para onde quer que o visitante se dirija quando clicar nessa (parte da) imagem, ou seja é o link. Preencha também o texto alternativo que pretende que o seu visitante veja quando coloca o rato sobre sem clicar) essa parte da imagem.
Repita o passo para o resto das subimagens.
Passo 3: Ver o código obtido
Clique em Ver >> Código
para ver o código do ficheiro que vai obter
Passo 4: Gravar e Publicar
Grave o ficheiro.
Verá que obtém um ficheiro com a extensão .map
Não se preocupe.
Agora, no explorador do Windows, altere a extensão do ficheiro de .map para .html
E pronto tem a página pronta a utilizar. Faça o seu upload para o seu servidor.
No caso de ter um blog, faça o upload do ficheiro .html bem como da imagem original, para o seu servidor (têm obrigatoriamente de ficar na mesma pasta do servidor remoto.
Depois é usar o código de iframe num dos posts do seu blog (ou na sua barra lateral, ou onde quiser, no seu blogue), para inserir o ficheiro .html que acabou de criar e de fazer upload.
Foi o que eu fiz.
Se algo correu mal, ou se expliquei algo deficientemente, coloque o problema nos comentários, por favor.
Boa sorte.
