Maratona de Tutoriais - Menu que muda a imagem ao mouse passar por cima

Oieee meus CupCakes de Limão com granulado colorido ; - )

Bom eu havia dito que a maratona só iria começar amanhã (segunda ) Mas

acho que vou começar hoje e só vai terminar no próximo sábado! Vamos ao tutorial!
Antes vou dar os créditos ao Go Imagine .

Hoje vou ensinar a fazer aquele Menu que quando você passa o mouse por cima 

muda a imagem (Menu em estado hover) !
Exemplo abaixo ↓ de como vai ficar :

Bom vamos lá !Antes clique em Read More  ↓
(OBS : Não envolve CSS)Entre em Design>Elementos da página>Clique em Adicionar um Gadget, e adicione o HTML/JavaScriptE cole o seguinte código :

<center><a href="link da página"><img src="URL da imagem normal" onmouseout="this.src='Repita a URL da imagem normal';" onmouseover="this.src='URL da imagem no estado hover';" /></a></center>

Bom depois é só fazer as seguintes alterações:


Onde pede "link da página" troque pelo link da página que você desejar.

No lugar de "URL da imagem normal" é a url da imagem sem passar o mouse e onde pede "repita a URL da imagem normal" é a mesma coisa.

Já em "URL da imagem no estado hover" coloque a imagem que você quer que apareça ao passar o mouse.

Se você NÃO quiser o menu centralizado é só retirar as tags do começo e do fim, <center> e </center> respectivamente.


Fiz algumas imagens para vocês mas se quiserem pode fazer as imagens de vocês (OBS: As imagens que fiz são grandes, mas vocês podem diminui-las para o mesmo tamanho sem editor neste tutorial, mas olha só coloquem o mesmo tamanho.) e as imagens que fiz foram inspiradas nas do Go Imagine. O importante é estar do memso tamanho, largura, altura e posição!
 

           
           
       
          
         

      

      

      

      

      

      

      

E então comentem dizendo se foi útil para você ou o que acharam, é só isso por hoje gente, comentem dizendo qual vai ser o tuto de amanhã (Segunda) Bjokas, XOXO Bye.