Image Map

Como fazer um menu que muda a cor/imagem quando encosta o mouse

|
Tumblr_lwbdgdikrp1r87h2qo1_500_large
Recebemos vários pedidos de como fazer um menu que quando encosta o mouse, muda de cor. Por isso vamos ao tutorial!
1- Escolha as imagens que você quer que apareçam normal. E as imagens que você quer que apareçam quando se encostar o mouse. Lembre-se que as imagens que aparecerão quando se encosta o mouse  devem ser do mesmo tamanho das normais para o menu ok?
2- Vá em Design, Elementos de Página e adicione um Gadget (HTML/JavaScript) e cole o seguinte código fazendo as devidas alterações no que está em rosa:
<img src="COLOQUE AQUI O ENDEREÇO DA IMAGEM NORMAL 1" onmouseout="this.src='COLOQUE AQUI O ENDEREÇO DA IMAGEM NORMAL 1';" onmouseover="this.src='ENDEREÇO DA IMAGEM DE QUANDO O MOUSE PASSAR 1';" />
<img src="COLOQUE AQUI O ENDEREÇO DA IMAGEM NORMAL 2" onmouseout="this.src='COLOQUE AQUI O ENDEREÇO DA IMAGEM NORMAL 2';" onmouseover="this.src='ENDEREÇO DA IMAGEM DE QUANDO O MOUSE PASSAR 2';" />
<img src="COLOQUE AQUI O ENDEREÇO DA IMAGEM NORMAL 3" onmouseout="this.src='COLOQUE AQUI O ENDEREÇO DA IMAGEM NORMAL 3';" onmouseover="this.src='ENDEREÇO DA IMAGEM DE QUANDO O MOUSE PASSAR 3';" />
<img src="COLOQUE AQUI O ENDEREÇO DA IMAGEM NORMAL 4" onmouseout="this.src='COLOQUE AQUI O ENDEREÇO DA IMAGEM NORMAL 4';" onmouseover="this.src='ENDEREÇO DA IMAGEM DE QUANDO O MOUSE PASSAR 4';" />
Bem fácil não é? Espero que vocês tenham gostado. Caso usem, creditem ok?

8 comentários:

Barbara disse...

Super, super obrigado!
Tava procurando esse tuto á seculos *-*

Bjs,
www.blogportalteen.blogspot.com

Thamíris disse...

Que perfeito, eu tava procurando isso na internet inteira. Favoritei s2s2s2s2
http://dezoitovoltas.blogspot.com/

Alexia disse...

AAi, então Lu, No meu deu certo mas teve um problema, Quando eu encosto na imagem ele muda, mas a imagem desaparece! O que eu faço ? Pode me ajudar ? Manda um e-mail pra teenfyn@gmail.com porque o blog está em reforma.
Ficarei grata, beijos!

Maquele disse...

Nossa,muito bom,adorei isso,com certeza irei usar no meu próximo lay,eu tinha procurado tantooo isso na net pra por nesse lay e não encontrei ;'(

Adorei a dica *-*

Any disse...

Oi amoore! que blog perfeito, em? Tá de parabéns! Já estou seguindo, segue de volta? Ah, amei o tutorial!

www.this-is-everything-blog.blogspot.com

David Costa disse...

Useei esse huhu !

http://garotoonerd.blogspot.com

Ana Paula Fuentes disse...

Faz tempo que eu estava procurando um menu assim *-*


Go Belezando

Debee disse...

Que fácil e divo! *-*