Como mapear imagens

17 de janeiro de 2017

Olá pessoal! Como estão?
Hoje decidi trazer o primeiro tutorial do blog, e para esse primeiro tutorial decidi trazer esse que é Como mapear imagens, que é colocar links em imagens, como vocês sabem pelo Blogger é impossível fazer isso e eu acho que pelo Wordpress também, então você tem que utilizar um site externo para fazer isso.

Um exemplo desse tutorial é o menu de categorias abaixo do cabeçalho e eu vou utilizar essa imagem mesmo.

Vamos ao tutorial:

Primeiro entre nesse site: http://www.image-maps.com/


Depois faça upload (envie) da sua imagem, através da URL ou clicando no botão BROWSE FOR FILE

Quando você selecionar a imagem irá aparecer no mesmo lugar START MAPPING clique nesse botão.
Irá uma página com uma mensagem, então clique em CLICK TO CONTINUE

Depois irá aparecer a imagem em tela branca e então é só começar.
Para selecionar a parte que você quer colocar o link é só CLICAR COM O BOTÃO DIREITO do mouse >> daí você escolhe se quer criar em forma de retângulo, polígono e circular. Eu irei escolher em forma de retângulo.
Então é só CLICAR E ARRASTAR em cima da imagem. Ficará assim:
Então coloque a URL do local onde está escrito MAP URL.
Logo depois clique em SETTINGS >> e deixe em HIDDEN, pois assim ficará transparente, porque se você deixar em visible é possível que fique com uma cor onde você selecionou.
Depois disso é só clicar em SAVE.

*** Se você quiser colocar mais é só fazer o mesmo processo. ***

Se você terminou CLIQUE COM O BOTÃO DIREITO novamente >> e depois clique em GET CODE
E depois em HTML CODE 

E role até lá em baixo e lá terá uma caixa escrito HTML Image Map Code e copie todo código que terá lá.

Vá no Blogger >> clique em LAYOUT >> depois em ADICIONAR UM GADGET >> então clique em HTML/ JavaScript e cole lá o código e depois clique em SALVAR.

E pronto! Sua imagem estará mapeada.

Se tiverem algumas dúvidas ou sugestões fale ai nos comentários.
Espero que tenham gostado e até o próximo post.
Beijos e tchau!

FRASE DA SEMANA
Nem demais
Nem de menos
só o suficiente
para ser feliz...
Boa Semana!

41 comentários:

  1. Dica maravilhosa.
    Ótimo poste.
    Beijos.
    http://vinteedoisdemaio.blogspot.com.br/

    ResponderExcluir
  2. Socorrooooo!! Isso é extremamente útil!
    Meu template que aguarde! haha

    http://minhaformadeexpressao.blogspot.com.br/

    ResponderExcluir
  3. Eu super amei o tutorial, vai me ajudar bastante!
    Convido você e todas as suas leitoras para conhecerem meu cantinho,
    e se gostarem seguirem, retribuo a todos ^_^
    Blog: Desvendando Segredos

    ResponderExcluir
  4. Ótimo tutorial Marcy, adorei!
    Sendo o primeiro vc fez super explicadinho, faz mais pra gente, viu?
    Um beijão!

    ahh e já estou participando das suas redes sociais.

    www.bybruni.com.br

    ResponderExcluir
  5. não consegui seguir seu blog, está aparecendo em branco pra mim. sabe me dizer como resolver?

    ResponderExcluir
  6. Wow, esse tutorial é ótimo! Vou tentar pôr em prática :D
    Beijos
    http://tipsnconfessions.blogspot.com

    ResponderExcluir
  7. Achei o post muito útil, vai ajudar muita gente!
    Beijos
    Bluebell Bee

    ResponderExcluir
  8. Nossa que maravilha de post <3 hahaha
    Acho que vou tentar fazer no meu

    Beijão,
    Desencana mina

    ResponderExcluir
  9. Nossa, eu precisava de post à alguns meses atrás, quando queria mudar o visual do meu blog, mas adorei seu post, quando eu quiser mudar meu blog novamente já sei como. Obrigada pela dica, beijos!

    www.coisasdaglauci.com

    ResponderExcluir
  10. Vc ajudou MUITO! Eu tive que mapear uma imagem esses dias e não achava nada que facilitasse a vida!

    Bjinhos,
    ❥ AmigaDelicada.com.br

    ResponderExcluir
  11. AAh, super útil!!! Vou salvar aaqui, pois estou querendo fazer as categorias do blog com imagens ♥
    bjs

    Blog: Skull Minds | Twitter | Tumblr | Pinterest | WeHeartIt
    Snap: maisaindia

    ResponderExcluir
  12. Nossa fiz muito isso no começo do blog, hoje em dia tem uma pessoa que faz pra mim, mas o post está perfeito
    Beijos
    www.yasmin-sodre.blogspot.com.br/?m=1

    ResponderExcluir
  13. Boa dica!
    bjs
    http://www.pinkbelezura.com/

    ResponderExcluir
  14. Adoro tutos assim hahah ajudam muitas blogueiras iniciantes e intermediarias a ter um pouco de noção sobre como tudo é feito. No começo eu me arriscava muito em design e etc, mas acabei cedendo aos lays prontos que dão menos trabalho hahahah.
    Muito legal <3

    http://umagarotanadaencantada.blogspot.com.br/

    ResponderExcluir
  15. Ah que legal dica muito boa!
    seguindo você
    beijos
    https://oneoffjulia.blogspot.com.br/

    ResponderExcluir
  16. Esse tutorial é bem legal! :)
    Fiquei apaixonada na frase da semana!

    Um beijo.
    www.annecollise.com

    ResponderExcluir
  17. Olá, Marcy. Tudo bem?
    Não tinha conhecimento de como mapear uma imagem. Adorei o tutorial, de verdade.

    Um ótimo fim de semana. http://realidadecaotica.blogspot.com.br/

    ResponderExcluir
  18. Que tuto mais perfeito! Eu já tinha pesquisado antes mas eu achei tão complicado que desistir de fazer kk, mas amei o jeito que explicou e com bastante imagens <3 , parabéns !

    By~ Sweet Magic Kissus!

    ResponderExcluir
  19. Image-Maps ainda existe? Nossa, usava em 2011 não imaginava que ainda existia. Uma dica bem útil pra quem gosta de menu com imagem :D

    darnassiando.com

    ResponderExcluir