11/12/2015

Mudando a Imagem ao passar o Mouse (Imagem Hover)


Yo bunnies, como estão? Espero que todos bem. Não tenho certeza, mas acredito que irei viajar no final do ano... deixando o blog novamente em Hiatos, não é bem o que queria, pois deixei o blog em hiatos a tanto tempo e perdi praticamente todas as minhas visitas e afiliados, e agora que estou começando a recuperar, terei que me ausentar novamente, mas acontece néh.... Bom mas deixando esse papo de lado trazer um tutorial básico da semana. Esse tuto já é velhinho, mas gosto muito de usar ele mas acho que nunca cheguei a posta-lo, o efeito é o seguinte; ao passar o mouse sobre o avatar (imagem), ela muda para outra imagem diferente. Você pode incluir um efeito mais tarde.

Primeiramente vá em layout, abra um novo gadget em java/script e dentro dele cole:

Códigos
<a href="ENDEREÇO DE URL">
<img src="ENDERECO_DA_IMAGEM_NORMAL" onmouseout="this.src='ENDERECO_DA_IMAGEM_NORMAL';" onmouseover="this.src='ENDERECO_DA_IMAGEM_AO_PASSAR_O_MOUSE';" />
</a>
ou esse:
Códigos
<a href="ENDEREÇO-DO-LINK"><img src="ENDEREÇO-DA-IMAGEM-1" border="0" onmouseover="this.src='ENDEREÇO-DA-IMAGEM-2'" onmouseout="this.src='ENDEREÇO-DA-IMAGEM-1'"></a>
Endereço de Url: Colocar endereço de alguma pagina ou site, se não é só remover essa parte e </a>.
Endereço da imagem normal: Primeira imagem que vai aparecer.
Endereço da imagem ao passar o mouse: A imagem que vai aparecer ao passar o mouse.
OBS: Depois de passar o mouse a imagem muda, mas ao tirar o mouse a primeira volta a aparecer.

6 comentários:

  1. Ai, amém achei esse tutorial! Eu vivia procurando mas nunca achava, obrigada por postar Wendyzinha <33333
    ♡mikicandy♡

    ResponderExcluir
    Respostas
    1. Oi Sakura, que om que pude lhe ajudar. :3 Acho esse tuto muito legal! Nada foi um prazer compartilhar com vocês.

      Excluir
  2. Normal girl, todos temos vida pessoal, eu tbm perdi muitas visitas :/.
    Vou usar esse efeito, adorei rs.

    http://belovedcoffee.blogspot.com

    ResponderExcluir
    Respostas
    1. Verdade, verdade. Eu não fico no blog direto, ate porque sei que não é bom, então posto só umas 3 vezes na semana, o meu blog perdeu muitas visitas porque foi hackeado então até... conseguir recuperar tudo levou um tempinho.

      Excluir
  3. Muito bom o tutorial! to tentando fazer um layout pro meu blog, com certeza vou usar, amei.
    bjoo >.<

    blognatalypamplona.blogspot.com

    ResponderExcluir
    Respostas
    1. Obrigada Flor. Ficara muito lindo sem dúvidas. Beijinhos, obrigada por comentar.

      Excluir

Bem Vindos
Hi! Meu nome é Andréa Alark, mas conhecida como Wendy dona do blog Bunny Crazy. O blog foi criado em 2010 na intenção de ajudar a criação e desenvolvimento do seu blog. Aqui encontrará tutoriais e dicas de HTML, layouts gratuitos e muito mais.
Friends
Bunny Crazy by Wendy ❀
Bunny Crazy ★
Bunny Crazy ★
12345