A carregar...



Criação de Image Maps com o Gimp




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.





                         


Mensagens relacionadas (por Tags)






Responda a este post


Enviar um comentário