Inicio Parceiros Recebemos Duvidas? Sobre A Dona Image Map

3 de fev de 2012

Tutorial - Mapeando imagens online.

Olá queridos leitores. Primeiramente, desculpo-me pela nossa ausência. Mas sabem como é: entrar no ensino médio sempre é dificil. Vai levar um tempo para que nos ajeitemos. Hoje vou ser bem breve, é um tutorial, o primeiro do blog que eu considero super simples. 

"Mapeando imagens online.". Não entendeu? Vejam a imagem aqui do Tudo4Girls:



Vejam que ela apresenta links que são integrados na imagem. Um leitor me perguntou como fazer isso. 

Vocês vão aprender passo a passo, sem ter que baixar programas. (:

1- Crie a imagem.

Crie uma imagem com palavras dentro dela que respresentarão os links, ou qualquer outra coisa. Você pode fazer isso com seu programa de preferência ou no Picnik, editor de imagens que eu já apresentei aqui no blog (ver).

Vamos usar essa imagem de exemplo:


2- Começando no site.

Para mapear a imagem, acesse esse site: Image-Maps

Para selecionar a imagem, use umas das duas opções: Clique em "Choose File" para selecionar uma imagem que já está salva nos seus arquivos. Ou em "From Url" digite o url da imagem, se ela já estiver hospedada.

Depois de selecionada a imagem, clique em "Start Mapping Your Image".

Abrirá a seguinte página:

É uma mensagem para doarmos pro site e blá blá blá. Aguarde os segundos que vão passar e clique em "Continue to Next Step".

3 - Mapeando a Imagem


Siga os passos da imagem a seguir:



Quando terminar de mapear, clique em "Get Your Code".


Para conseguir o código, siga o seguinte passo:




Copie o código e cole onde preferir, seja na sidebar ou em qualquer lugar.

Prontinho! Espero que tenham gostado e aprendido. Ainda pego o jeito com tutoriais, desculpe-me qualquer coisa.

Podem tirar suas dúvidas nos comentários, mas só responderei segunda.

Ah, é: eu fiz o tutorial, eu elaborei. Juro que não sei se existe tutorial sobre isso, nem pesquisei, mas nào copie gente, deu trabalho para fazê-lo, tenham consideração, tá? ;D

Beijinhos,

29 comentários:

  1. o tutorial ficou uma graça, continua colocando tutoriais sempre ajuda

    ResponderExcluir
  2. esse site do image-maps facilitou a vida de nós blogueiras, rs
    Adorei o tuto ^^

    Bjs
    http://blogportalteen.blogspot.com

    ResponderExcluir
  3. Tutoria muito útil! Tem muitas blogueiras por aí a procura desse tutorial. :3 Querida, agora eu estou fazendo cursores personalizados, peça o seu, aqui vai ficar ainda mais lindo *o*

    Beijos, somente-moda.blogspot.com

    ResponderExcluir
  4. adorei o tutorial bem explicado... ajuda muito
    flor vou faze os pngs da Taylor Swift depois passa lá ok ótimo fds bjos!!

    ResponderExcluir
  5. gostei do tutoral =)

    http://himi-tsu.blogspot.com/

    ResponderExcluir
  6. AAAAAAAAAAAAH, Ameeei o tutorial ! SUPER PRÁATICO! *0*
    PAKSPAKSAPSKAPSKA , IMAGE-MAPS, salvando vidas! KKKKK
    Comenta lá ?
    http://www.siteshoow.com/
    Beijoos !

    ResponderExcluir
  7. Bem explicadinho e bem útil.
    Adorei.
    Beijo de unicórnio :3
    Tweeny,
    Only4Teens-s2.blogspot.com

    ResponderExcluir
  8. Ah eu curto muito esse site, uso pra tudo! Bem melhor do que mapear com um editor de fotos! Seu blog é muito lindo, amei os posts, o design... Enfim, tudo! Já tô seguindo aqui, ficaria muito grata se visitasse o meu e seguisse, beijos!

    www.garotadeallstar.com

    ResponderExcluir
  9. Adorei esse tutorial. Menina, teu blog é perfeito!

    http://esmaltesycia.blogspot.com

    ResponderExcluir
  10. Ain, adorei, bem explicado!

    Bjs :P
    http://bnascimentooo.net.tc

    ResponderExcluir
  11. Primeiramente, desculpe a demora! Fiquei um tempo sem entar no blogger.. =/

    Ótima dica! Demorei muito para aprender a fazer isso...

    Beijos
    cfhell.blogspot.com

    ResponderExcluir
  12. Oii lindona, eu sei como é essa fase e as ausencias!! Estarei sempre ansiosa pelos posts. Tutorial super legal, ajuda muito. Tem selinho pra voce lá no blog.
    Bjokas flooor!
    Day

    http://impaciencianet.blogspot.com/

    ResponderExcluir
  13. Tá rolando um sorteio lá no blog de um colar e um button que trouce da Argentina! Clique aqui para participar.

    Beijos,
    Blog | Twitter | FanPage

    ResponderExcluir
  14. Adorei o tutorial =) é mt bom

    seguindo aqui tambem te convido a participar do concurso que está rolando no meu blog , ta muito bom vale a pena participar e ficarei feliz se vc for participar para saber mais :

    http://quasepuberdade.blogspot.com/2012/02/concurso-seja-destaque-por-1-mes-uma.html


    beijos e espero que participe

    ResponderExcluir
  15. OMG! que blog perfeitoo!
    amei amei, mt bom *--*

    http://rebyfashionworld.blogspot.com/

    ResponderExcluir
  16. Deu para aprender sim, seu tutorial ficou ótimo!!
    E, obrigada. pensei que fosse precisar baixar zilhoes de programas de editor de imagem, Porque, na verdade eu sou péeessima com isso!
    bjs :*

    ResponderExcluir
  17. Ahh ja sabia mais ta valendo o tutorial e super berm explicado e Ameei seu blog ta suuuuper liindo *oo* Contnuue assim que vc vai longe rs ' Suas postagens são impecáveis e parabens pelo design
    ja sigo se púder retribuuir ^^ , Fico Feliz *--*
    portaldisturbiablogger.blogspot.com

    ResponderExcluir
  18. Parece muito facil ^^ . Mas acabei de reforma meu blog, então não dá mais tempo T.T . Muito lindo o blog amore ^^

    http://blogadole.blogspot.com/

    ResponderExcluir
  19. Ótimo tuts, linda!!!
    Continue assim compartilhando!

    bjos

    mulherziceseafins.blogspot.com

    ResponderExcluir
  20. O que acontece se clicar em "update"??

    ResponderExcluir
  21. É assim mesmo, de vez enquando a gente fica sem tempo de postar.
    E é normal. Eu já tinha visto este tuto, mas não sabia pra que servia agora entendi, e é muito util mesmo!!! vou até salvar.
    um beijooo bruna.

    ResponderExcluir
  22. é bem útil o tutorial, amei seu blog bem lindo :D seguindo... retribui? www.blog-sweetteen.blogspot.com

    ResponderExcluir
  23. Oii^^
    Tudo bemm??
    Estava passeando pela blogsfera, e achei seu cantinho!
    Me apaixonei, rsrs!
    Pensei se você poderia me ajudar coma meta de 300 seguidores!
    Tem como???
    Um beijo

    storyofgirlsoficial.tk

    ResponderExcluir
  24. Oi Adorei tudo daqui , parabéns !
    então tou começando um blog agora e queria sua ajuda seguindo ele. eu retribuoo ! pf conto com você
    ^*^ Pedro !
    http://things-to-you.blogspot.com.br/

    ResponderExcluir
  25. Adorei o blog, muito lindo, amei tudo. Parabéns mesmo, vou sempre estar aqui (:

    ontendency.blogspot.com

    ResponderExcluir
  26. Adorei, vai ajudar muuuito. (:
    3Bjs
    http://cheirinhodedoce.blogspot.com

    ResponderExcluir
  27. Adorei o tuto.
    Kisses
    http://blog-deluxe-edition.blogspot.com.br

    ResponderExcluir
  28. Oii , seu blog é deeeeeemais ! amei# Beijoos
    Naah -
    garotamilkshake.blogspot.com

    ResponderExcluir
  29. Olá!!

    Adorei o post...super explicado!!
    Já estou seguindo o blog!!

    Passe depois lá no meu blog, está rolando um sorteio e vc está convidada a participar!!

    http://blogbatepapoentreamigas.blogspot.com.br/20...

    Bjos

    ResponderExcluir

Agradeçemos pelo seu comentário!
P.S: Os comentários estão abertos, mas os que não passarem por nossas regras serão excluídos. Para ver as regras visite a nossa página Fale Conosco.