22 janeiro, 2012

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

Tumblr_lsyrptywps1r3e3fro1_500_large
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/JavaScript
E 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.

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.

9 comentários:

  1. Oi, eu amei seu blog, a primeira vez que venho aqui e já ameei,a Demi é uma diva né? Eu tenho um blog também quando puder da uma passadinha lá *-* http://1mundoteen.blogspot.com/

    ResponderExcluir
  2. Oii,você faz layouts ??
    Eu to dessesperada por um!
    Se você pudesse fazer o meu?
    Bom eu queria um layout completo,mais um link do blog,você poderia fazer?
    o tema seria de bolinhas brancas no rosa pq ta lá no meu,com o tema lá em cima(o banner) sendo com brushes de menininhas,moda,bolinhos,e se pudert a torre eifel!
    Eu agradeceria muito e ficaria um mês te divulgando e colocando seu link lá
    Beijinhos
    entra em contato comigo lá por comentarios
    http://leka2002.blogspot.com

    ResponderExcluir
  3. Muito Obrigada Stela!
    Beijinhos
    mas você pode me dizer quando termina ?
    Bjsss
    http://leka2002.blogspot.com

    ResponderExcluir
  4. Ok,mas pode ser em 10 dias?? mas se não der eu espero,é que eu preciso muito,e as cores podem ser em rosa e marrom claro,branco
    Beijo
    http://leka2002.blogspot.com

    ResponderExcluir
  5. Estava procurando *o*
    Vou testar pra ver se dá certo k
    bju

    http://garotasederivados.blogspot.com/

    ResponderExcluir
  6. Obg Fofa! Obg mesmo
    Nossa quanto comentário meu,hahaha'
    Bjss
    http://leka2002.blogspot.com

    ResponderExcluir
  7. preciso arrumar um tempo para testar alguns tutoriais, e esse é um dos que COM CERTEZA vai ser testado!
    aliás, amei teu blog! demi, muuuuuito diva!! sucesso!
    beeeeijos, maria clara x
    http://beijofosco.blogspot.com/

    ResponderExcluir
  8. Oii Stela!
    Eu vi o layout que vc fez para o meu blog,e ameeeeeeei muito! Já terminou? Ou quando termina?? quando terminar ou slá,você me ajuda a colocar o layout no meu blog??
    Beijão
    http://leka2002.blogspot.com

    ResponderExcluir
  9. Adorei o seu blog... é mtu lindo... estou seguindo... retribui???

    Bjokas... ^~^

    http://diario-para-girls.blogspot.com/

    ResponderExcluir