Mapeamento de imagem

by - 09:53



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:

conversaintima
Os marcadores…
Marcadores6

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
Image Map Tool - On-line Image Map Creator - HTML   CSS   Image-Maps.com

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
Image Map Tool - On-line Image Map Creator - HTML   CSS   Image-Maps.com (1)

Clique então em “Star Mapping”. e vai aparecer essa tela
Upload Image Map   image-maps.com

Você clica em “Click to continue” e ai é que começa o mapeamento da sua imagem

Image Mapping

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.

Image Mapping (1)Image Mapping (2)Image Mapping (3)

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.

Image Mapping (4)

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.

You May Also Like

9 comentários

  1. Gostei muito do teu blog :D

    www.voudecintaliga.wordpress.com

    ResponderExcluir
    Respostas
    1. Obrigada Stéphanie, fico feliz que tenha gostado do blog.
      Abraço grande e volte sempre.

      Excluir
  2. Ameeeei Fernanda! Arrasou nessa dica :D

    ResponderExcluir
    Respostas
    1. Que bom que gostou Ana,
      Muitos tinham essa duvida e resolvi ajudar.
      Abraço grande e volte sempre
      Qualquer duvida só gritar...

      Excluir
    2. Ai ai... vou precisar de uma ajudinha.. haha
      Eu 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

      Excluir
    3. Floooor, deu certo :D
      a imagem estava grande demais, diminui o tamanho, mapeei novamente e consegui!

      Muito obrigada, sua dica foi valiosa demaaaais!
      Beijo.

      http://blogmywishlist.wordpress.com

      Excluir
    4. Ana,
      Ein? 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

      Excluir
  3. Ola
    adorei a sua dica vou tentar fazer também pro meu blog
    te espero no meu blog

    http://arianetorrezandesouza.blogspot.com.br/

    bjs

    ResponderExcluir
    Respostas
    1. Fico feliz que tenha gostado da dica Ariane, faça sim, vai gostar muito apesar do trabalho.
      Abraço grande e volte sempre

      Excluir

Sua opinião é muito importante para mim,
Comente, discuta,converse, a casa é sua.
Obrigada e volte sempre que quiser.