Mapeamento de imagem
O que é? pra que serve? da trabalho? é difícil?
Resumidamente, mapear uma imagem é simples e fácil mas trabalhoso e vou explicar aqui o que é, como faz tudinho, vamos?
Eu fiz a minha imagem Header através do mapeamento de imagem e os marcadores em forma de imagem também, o que eu fiz;
Primeiro criei a imagem da Header e dos marcadores e sim, fazer a imagem da trabalho mesmo.
As minhas ficaram assim:
Os marcadores…
Agora, os marcadores eu que fiz no Photoscape que para quem não conhece falei dele aqui
Você cria uma imagem com altura e largura da sua barra lateral e dai você vai lá em “objeto” e adiciona uma imagem que queira, um ícone, no meu caso eu fiz o seguinte:
Na aba “Objeto” fui em “Balão” e escolhi “calli_03” exclui o texto e escolhi a cor do balão e opacidade e diminui no tamanho que queria, depois fui em imagem e escolhi um brushe qualquer e coloquei em cima do balão, dai você coloca texto e põe do tamanho que quiser também.
Viram que é trabalhoso né? imaginem 20 Marcadores e ter que criar um balão pra cada, depois coloca a imagem, adiciona o texto e ainda depois tem que mapear ufaaa
Mas ok, depois de ter criado a imagem você vai agora conhecer o santo milagreiro que vai transformar sua imagem em links;
O nome dele é Image-Maps o melhor e mais simples que conheço (alias, só conheço esse).
Primeiro ao abrir ele você vai ver essa tela
Então onde está escrito “Browse for file” você clica e escolhe a imagem que você fez e salvou no Photoscape certo e então você vai ver essa tela
Clique então em “Star Mapping”. e vai aparecer essa tela
Você clica em “Click to continue” e ai é que começa o mapeamento da sua imagem
Você vai clicar com o botão direito e “Create Rect” e então onde tem “Map Url” você cola a url do seu marcador ou a url que for usar como link e em “Events” você tem que por a url de sua imagem, ou seja, vai ter que hospedar sua imagem em algum site se não o código não funciona.
Após isso você clica na aba “Settings” e deixa como está na imagem.
Após ter feito isso com cada quadrado da sua imagem que deseja transformar em link você clica novamente com o botão direito e vai em “Get Code” e na aba “HTML Code” você copia todo o código e então você vai no Layout do seu blog, Adicionar novo Widget, HTML e cola o código que você copiou onde quiser.
E pronto, você mapeou sua imagem com sucesso rss
Dependendo do numero de quadrados ou texto que você quer transformar em link da trabalho mas é fácil e logo você pega a pratica.
E então, o que acharam? alguma duvida? só gritar.
9 Comments
Gostei muito do teu blog :D
ResponderExcluirwww.voudecintaliga.wordpress.com
Obrigada Stéphanie, fico feliz que tenha gostado do blog.
ExcluirAbraço grande e volte sempre.
Ameeeei Fernanda! Arrasou nessa dica :D
ResponderExcluirQue bom que gostou Ana,
ExcluirMuitos tinham essa duvida e resolvi ajudar.
Abraço grande e volte sempre
Qualquer duvida só gritar...
Ai ai... vou precisar de uma ajudinha.. haha
ExcluirEu fiz uma imagem com 21 quadradinhos que correspondem as minhas categorias, fiz todo o processo que você ensinou, coloquei no blog, mas quando vou clicar em cima,para testar se está redirecionando certinho, todos os quadradinhos só redirecionam para a primeira categoria. Já fiz duas vezes e aconteceu a mesma coisa. Com você foi assim?
Se conseguir me ajudar eu te agradeço muito!
Beijos
Floooor, deu certo :D
Excluira imagem estava grande demais, diminui o tamanho, mapeei novamente e consegui!
Muito obrigada, sua dica foi valiosa demaaaais!
Beijo.
http://blogmywishlist.wordpress.com
Ana,
ExcluirEin? rsss
Essa não tinha me acontecido alias, uma vez mas foi por que coloquei o mesmo link em todos os quadradinhos eheheheeee
Mas que bom que conseguiu, qualquer coisa estamos aqui, posso demorar um tantinho a responder mas respondo ok.
Abraço grandeee e volte sempre
Ola
ResponderExcluiradorei a sua dica vou tentar fazer também pro meu blog
te espero no meu blog
http://arianetorrezandesouza.blogspot.com.br/
bjs
Fico feliz que tenha gostado da dica Ariane, faça sim, vai gostar muito apesar do trabalho.
ExcluirAbraço grande e volte sempre