18 março 2014

Como mapear uma imagem (Diferente)


Holla!!! Como vão?
Por um tempo vou estar postando tutoriais para concluir a aba de Goodies no menu.
Então, um tutorial muito útil é o de como mapear uma imagem. O que é mapear uma imagem? É colocar, vamos dizer, "link" em uma imagem. Que quando você clica em determinado lugar na imagem, abre outra janela específica. O mapeamento de imagens pode ser usado para criar menus por exemplo.
O melhor site para mapear uma imagem é o Image maps. É bem fácil de utilizar e fica certinho! Mas recentemente, mudaram a configuração do site e agora é preciso ter Facebook para utilizar. Bendito Facebook! Aff! Como eu não tenho, aí a coisa complica um pouco. Se você tem, maravilha! Vá no site, faça login, e procure algum outro lugar onde ensina a mexer nele (Recomendo: Aqui. A postadora explicou muitíssimo bem! Antes de mudarem a configuração eu consegui mexer no site com esse tutorial.).



Para quem também não tem Facebook, o Facebook travou, não gosta, não quer utilizar nesse site, teve amnésia e esqueceu a senha (Brincadeira!)... Tem outros meios de mapear a imagem. Dá pra até usar o Paint! O Cherry Bomb até ensinou a fazer isso, mas como eu não achei como usar o Paint pra mapear a imagem, eu encontrei outro site de mapeamento.

Image Mapper. Os nomes são parecidos mas não são os mesmos de jeito nenhum, viu? Esse site não é TÃO completo, é uma coisa bem básica na verdade, mas deu pro gasto. Gostei da simplicidade. Está em inglês, mas não tem problema. Então primeiro você vai colocar o código da sua imagem no espaço de Image URL. Pra sua imagem ser aceita.
Sugiro você hospedar ela em outro site. Aqui Por exemplo. É só criar um nome uma senha, é rápido e fácil. Depois que você criar a conta, clique em Upload (O botão grande e laranja), Depois em Choose photos & videos, coloque a foto que você salvou, depois de carregar, clique em Library lá em cima, você logo vai ver sua imagem clique nela e aí é só clicar com o botão esquerdo do mouse, e "Copiar URL da imagem". A explicação é meio longa, mas isso você faz em segundos!

Feito isso, volte no Image Mapper e:










Feito isso, aperte em Load image. A sua imagem vai aparecer embaixo e tal.
Agora que sua imagem já carregou, clique em New Link e:












Então ao clicar em New link, aparecerá um quadradinho que você ajusta sobre o local que você quer que seja "clicável", coloca o endereço do lugar para onde a pessoa irá ao clicar no link e a mensagem ao passar o mouse por cima. Feito isso, tudo certinho, clique mais uma vez em New Link e repetindo o mesmo processo com os outros lugares para se clicar.
Depois de ter colocado todos os Links:











Clique em "Make Code":

























E o código da sua imagem mapeada aparecerá! Tcharãn!!
Depois de um tempo você pega o jeito e faz bem rápido. Apesar da explicação MEGA-ENORME, é bem simples.
E aqui está a imagem que eu usei como exemplo:



Viu? Se você clicar vai para outro endereço da internet.
Então, não é preciso usar o outro site para mapear uma imagem. Tem vários jeitos. Eu por exemplo, uso esse, apesar de não ser o mais completo, é bem básico, simples e rápido.
Esse post está enorme! Tentei explicar tudo nos mínimos detalhes! Eu consegui gente? Espero que sim!

Nenhum comentário:

Postar um comentário