Image Map

22/10/2012

Tutorial: Como mapear cabeçalho

Hey hey, vim divulgar um baby blog lindo, o The Little Sugar, da fofa da Amanda! E ela tá precisando de alguém pra equipe do blog dela, que tal você se inscrever? :3
acho lindo esse gif :3
 Mais um tutorial pedido!
 Dessa vez foi pedido pela Ali, mas eu já iria fazer de qualquer modo. O meu é meio diferente, já que eu também ensino a fazer com o outro modo de mapeamento (vocês vão entender no tutorial).
 É muito simples de se fazer, fácil, rápido e o resultado é bem legal. Um exemplo do resultado é o cabeçalho atual do blog, mas caso você esteja vendo esse tutorial no futuro é aquela imagem que te redireciona ao link quando você clica nela, podendo ter mais de um link nela. To com preguiça de fazer exemplo, então fica essa explicação mesmo.
 Mas e agora, vamos lá?

 Abra esse site e clique em Escolher Arquivo>Start Mapping Your Image>continue to next step e então vai estar meio que assim:
clique na imagem para aumentá-la
 Clique no modo que quiser, dependendo da imagem que vá mapear. Se a imagem for quadricular, clique em Rectangle e se for em qualquer outro formato é só clicar em Custom Shape. Se escolher a 2º opção, é só seguir os seguintes passos:
clique na imagem para aumentá-la
 No passo 2 é só ir ligando os pontinhos. Agora se você for mapear uma parte quadrada, é só seguir a seguinte imagem:
 Depois de tudo, é só clicar em Get Your Code, pra, obviamente, pegar o seu código.
clique na imagem para aumentá-la
 Assim que abrir essa página, clique em HTML Code e copie o código até </map>, nada mais nada menos.
 Aí é só colar o código em um gadget de HTML/Javascript e/ou onde você quiser e pronto, está feito!
Postagem completa por Piink Cookie. Todos os direitos reservados. Copyright 2012. Plágio é crime.
 E aí, gostaram? Espero que sim. O tutorial é super útil pra qualquer coisa em qualquer design, eu adoro! Se usarem não se esqueçam de creditar, ok?
 É isso. Beijinhos com glitter :*

31 comentários:

  1. Ai, eu amo esse tutorial. Só que eu só não sei excluir o cabeçalho para colocar o HTML.. Tem que mexer no HTML, então deixa pra lá *-*

    ~~KISSUS~~

    ResponderExcluir
  2. Costumava usar desse jeit, mas acho que não dá muita emoção por não ter hover! ><
    hehe'
    Seguindo!
    Malikisses Xx

    Meu Jardim secreto

    ResponderExcluir
  3. Ameeii, vlw pela dica!

    http://meuguardaroupaa.blogspot.com.br/

    ResponderExcluir
  4. Esse tutorial é muito bom!!!! Adorei!!
    Fica bem legal no blog...

    Boa segunda!!! =)

    Beijos - http://blogdatalitaa.blogspot.com.br/

    ResponderExcluir
  5. Haha' Já conhecia. Esse foi o modo de "fazer um menu pelo cabeçalho" que eu conhecia. xD

    Na 1° vez que mapeei, nem sabia que tinha nome. =X

    Adorei o tutorial! ^-^

    ResponderExcluir
  6. gente eu já conhecia, me lembro quando fu fazer pela primeira vez, quase morri pra fazer viu hasushuu
    adorei.

    ResponderExcluir
  7. Que massa, isso foi o que vc fez lá pro blog né?
    Adorei :DDD
    Bjos!
    amonailart.blogspot.com

    ResponderExcluir
  8. ah é mt simples, né? Mas eu morro de preguiça de fazer. Sempre começo e não termino =x

    ResponderExcluir
  9. SER VIDA LOKA É LEGAL -nnnnnn

    Gostei demais do tutorial, você sempre com esse seu blog impecável u.u

    Bjos e boa segunda!

    http://sugar-dance.org

    ResponderExcluir
    Respostas
    1. -nnnn ><
      Ooown, brigada, viu? :3
      Pra você também!

      Excluir
  10. Já usei esse tutorial várias vezes lá no blog! Acho super legal *u*
    Beijo
    ill-helpyou.blogspot.com

    ResponderExcluir
  11. Gostei bastante do tutorial^^

    Beijos
    Amora Ruffles

    ResponderExcluir
  12. Muito útil o tutorial! Adorei muito!!

    Beijos!
    Garota Vertigem

    ResponderExcluir
  13. Amei, não sie porque eu tenho uma agonia a menu mapeado que nunca usei rs
    beijos

    ResponderExcluir
  14. (Paula entenderá, ^ aff) Demais,na única vez que eu usei,no blog de testes,ficou demais! Super aprovei *u* n~çao sabia desse outro jeito (: curti

    ResponderExcluir
  15. Gostei muito,muito útil,


    http://biaricaldy.blogspot.com.br/

    ResponderExcluir
  16. Own, obrigada por divulgar meu blog Paulinha *-*
    Ah, o tuto está super explicadinho!
    Ótimo post!

    Beijinhos | The Little Sugar

    ResponderExcluir