Mapeando facilmente uma imagem

Oi, gente! Nossa, me perdoem pela demora nos posts. Vou tentar ser mais frequente daqui pra frente, prometo.
Mapear uma imagem sempre foi a maior dor de cabeça, pelo menos pra mim. Mas recentemente conheci um site muito bom, o Image Maps. A ferramenta perfeita! Tá a fim de aprender a usar?

Suponhamos que você queira mapear esse menu:


1º Passo: vá até o site: http://www.image-maps.com/;

2º Passo: faça o upload da imagem;




3º Passo: espere o link que vem depois do timer regressivo;


4º Passo: Clique em "Rectangle" e comece o mapeamento;

Para mapear o próximo link, clique em "Rectangle" de novo. 

4º Passo: depois de mapear tudo, desmarque as opções à direita;


5º Passo: pegue seu código.

Agora é só copiar o código enooorme que aparece, depois ir em "Design", clicar em "Adicionar um Gadget" de "HTML/JavaScript" e colar o código.
Ah, e você também colocar direto no HTML do seu blog, mas para isso copie o código que está na aba "CSS code". 

Dúvidas? Qualquer coisa é só comentar. Beijos!

49 comentários:

Anônimo disse...

Amei! Andressa não consegui fazer o tuto da caixa de busca, ela fica tipo, porbaixo do cabeçalho, nao por cima entende?
Me ajuda?
Beijos ^^
http://sermenina-blog.blogspot.com

Profano Feminino disse...

Flor ótimas dicas de como fazer imagem mapeada. ^^

http://www.profanofeminino.com/

Luh Siglindes disse...

que site perfeito ! Deixa as coisas bem mais fáceis do que ter de fazer cada coisa de uma vez . Visita ? http://fashionscream.blogspot.com/

Marcinha disse...

oi andreza td bem? olha eu qro muito persobalizar a minha caixa de comentários, eu aprendi a colocar uma imagem no lugar do fundo cinza, mas qro que fique uma caixinha pra cada comentario. Eu vi um tutorial q vc fez mas não entendi a parte que vc disse "pode ser editada" onde colocar aqles códigos? me ajudaria muito, bjim
http://whatthehellsociedade.blogspot.com

Larissa Fernandes disse...

Andreza muito bom esse tutorial saempre tive dúvidas sobre isso! seguindo retribui ? http://ultimobiscoitodopacote.blogspot.com

dribs disse...

Andreza, arrasou neste tutorial... Está de parabéns!!
http://pinkpimenta.blogspot.com

Anônimo disse...

ficou muito bom o tutorial parabéns! http://magnificagarota.blogspot.com

Roberta :3 disse...

Bem legal mesmo!!!!
Adorei ^^
bjus

Louca Mistura disse...

Eu uso ele já a algum tempo, é muito bom mesmo!
beijos
blogloucamistura.blogspot.com

Stela Schulz disse...

Oiii tem selinho para vc la no meu blog seguindo retribui ?? http://sweetdreamsoficial.blogspot.com/

Tsu-chan disse...

Você salvou a minha vida!! Muito obrigada!! Quando eu for editar meu layout vou usar!! :D

www.s2mclara.blogspot.com

Elizabeth Passos disse...

A-do-re-i! Como sempre super prático seus tutos.
Miga tô loca da vida! Lembro que vc passou por algo assim: tem uns pops no meu blog do clicksor tô como uma bolha no not tentanto retirar essa praga afinal não coloco propaganda no EP! Se vc souber ou alguma das meninas do MN agradeço desde já a informação!
Bjks da Eliz do elizabethpassos.blogspot.com

Bruna ^^ disse...

Eu já sabia fazer, mas o tutorial ficou muito bom!
Bjks

vitoriaalmeida_g disse...

Finalmente aprendi kk , amore entra no msn .

Ana Carolina disse...

efeito over na imagem da post:
http://carol-and-teens.blogspot.com/

Unknown disse...

Adoreii o tutorial Andreza, pena que foi tarde demais, aprendi a fazer no Photshop! Mais o tutorial está ótimo!

Ecleticu's

Ingrid Marquês disse...

Oi Andreza, como coloca o código com um fundo colorido?
Bjs
www.fofokisteen.blogspot.com

Yuuki Kirkland disse...

Vou usar esse negócio pra mapear o próximo menu do GON!XD

Andreza todo dia eu entro no MN, deeesde JANEIRO!!! Sério, amo muito seu blog, mas nem tenho tempo mais de comentar. O MN foi um dos primeiros blogs que eu visitei na blogosfera :D
E pow, seis meses depois da primeira visita, fui ver que EU AINDA NÃO ESTAVA SEGUINDO!!! AAH XP
Vc ainda tem vagas pra parcerias? Bjss!
http://girlson-line.blogspot.com/

Anônimo disse...

Own ): ' O google chrome diz assim qd entro no site :
Oops! Google Chrome could not connect to www.image-maps.com
nem dá pra entrar D:'

Andreza disse...

@Laurinha - Sério? *-* KKKKKKKKKKKK Claro *-*

@Anônimo - Puxa, é verdade >< Não sei o que aconteceu, no dia que eu criei o tutorial o site funcionava perfeitamente :/

O jeito é aguardar :/

Gab disse...

Ja conhecia ele! haha. O site vive com uns "deslises" então ja edite seu post, pois quando eu fiz um tutorial explicando a mapear nesse site tive muitas "reclamações" haha

Beijinhos
www.fanaticospornoticia.tk

WE LOVE IT disse...

me ajudou e muito! hehee' você poderia seguir meu novo blog, já estou seguindo! beijos,
trechygirl.blogspot.com

Arianny disse...

Só não consegui fazer uma coisa, se for mapeamento no cabeçalho, como coloca no blog? Porque pelo que vejo no site o código todo é em html, sabe me dizer se tem como salvar a imagem, ou então como coloca em html no cabeçalho?
Obrigada, amei o tuto!
bjs
charmofpink.blogspot.com

Anônimo disse...

Assim que mapeei o menu do splash, hahaha. Rápido e fácil. :3
http://splashcake.blogspot.com/

Anônimo disse...

pode deixar andrezinha! eu nao esqueço n! olha flor, seus tuturias sao perfos! amo seu blog, fofa!

Elizabeth Passos disse...

Deu certo!!!!!!!!!!!!! Obrigaduuu! Super.

Maggie disse...

Não sabia desse site :3 Muito bom :D Vou usar xp gostei do tutorial e do teu blog vou visitar e seguir brevemente ^^

Miss Suicida disse...

Que fácil! Eu nunca consegui fazer um menu desse jeito por não conseguir mapear as imagens! lol

Um beijo, L.
metamorfoseeu.blogspot.com

Anônimo disse...

Eita, caracolis! Amei! Adorei esse site... meu blog está fechado em reforma e foi otimo eu encontrar esse tutorial! Eu ja tentei mapear imagens pelo paint mas não deu certo. Esse site me ajudou muito.

Anônimo disse...
Este comentário foi removido pelo autor.
Emily Caroline disse...

Tutorial que ajudou m-u-i-to! Beijos

Anônimo disse...

Como eu faço pra deixar a imagem mapeada encima e junta a área dos posts ? Tipo assim: http://blog-realgirls.blogspot.com/

beijos s2
www.clara-rodriguez.blogspot.com

jackie Zanini disse...

Que prático! me ajudou bastante (:

Beeeijos guria

Health disse...

obrigado pela introdução. Eu uso este serviço, muito bom! Fácil de usar dreamvewear fazê-lo. Eu sempre tento usar photoshop por "fatiar". No entanto ainda é complicado, uma vez que têm a exportar para a dreamvewer. lente de contato

Julia Queiroz disse...

heeey,só por uma coisa que eu não gostei ...
não ficou tipo o seu: quando o mouse vai em cima,ele não muda de cor,ensina?

heartcake-hc.blogspot.com

Teens Club disse...

Usei no eu blog! AADOREI ! Vê lá !

http://teens-club-br.blogspot.com
Beeijos.
Beca Nunes

Júlia Maita disse...

Nossa, facil mesmo! Acabei de usar isso em um layout que estou fazendo para mim... obg pela dica <3

Beijos
Julia
makes-da-julia.blogspot.com
@juliamaita

Camila disse...

Meu eu estava tentando fazer isso a um tempão...muito obg mesmo! \o/

http://garotamaisgarota.blogspot.com/

GiikaSanchess disse...

Flor, faz um favor ? Sabe esses números que ficam ao lado do '' disse ...'' dos comentários ?Posta um tutorial ensinando como colocá-los ? Obrigada viiu !
Beijokiss
http://wwwnovidadesdechocolate.blogspot.com

Maria Clara Marra disse...

OMGFFFFFFFFFFFF, VC ME SALVA COM ESSES TUTORIAIS!! PARABENSSSSSSSSSSS http://beijofosco.blogspot.com/

Dani Ribeiro disse...

O tuto tá muito bom, tá ótimo e eu consegui entender tudinho *-* Mas o único problema é que na hora em que eu clico HTML code não aparece código nenhum :( O que eu faço?

onthefame.blogspot.com

Vivian disse...

AJUDOU MUITO, AMEI AMEI AMEI, MUITO OBRIGADA. LINDO DEMAIS AQUI ^^

http://moderacover.blogspot.com/

Jo Moura disse...

Estava procurando por isso,já tentei mapear mais dai não foi,rs e desse jeito fica facilimo,agora ensina pra gente como faz pra mudar a cor qnd o mouse passa por cima igual tá o seu menu,bjoO!

Layza Beatriiz disse...

Esse blog me Ajuda demais , estou criando o meu blog através do tutoriais daqui (:

Layza Beatriiz disse...

eu? usei no meu blog que está em reforma , estou aprendendo muito com os tutoriais daqui amo o menina nerd <3 #lovemeninanerd

esse tutorial é fácil , rápido e prático!

Unknown disse...

oi antes eu conseguiia mapear agora nun cnsigo maais aa imagem nun carregaa volta pro menu novamentee vs pode me ajudar ....2KISSUS

http://girllsweett.blogspot.com

Paris Hilton ex-Junnior Hudson disse...

Não tá funcionando mais. ):

Vanessa *-* disse...

não consegui :( quando vc clica no menu eu fica na mesma pagina

Paulina disse...

consegui e adorei!