Passar o mouse sobre

<a href="http://www.dicasparablogs.com.br/p/lista-de-tutoriais.html"
onmouseover="this.innerHTML = 'tutoriais diversos'"
onmouseout="this.innerHTML = 'posts aleatórios'">posts aleatórios</a>

Veja aqui o exemplo:
posts aleatórios

A finalidade deste código é trocar o texto quando o mouse está sobre ele. O funcionamento é bem simples e fácil de alterar. Você deve colocar a url da pagina que desejar e escolher o texto que aparecerá. Um detalhe que não pode ser esquecido é repetir duas vezes o texto normal (aquele que aparece quando não estava com o mouse sobre ele) no exemplo Meu Jornal, pois se colocar apenas uma vez quando passar o mouse sobre ele o texto mudará mas não voltará ao original quando tirar o mouse.
Outro cuidado que precisamos ter é usar textos com numero parecido de letras pois se o texto que aparece quando o mouse não está sobre ele tiver 10 letras e quando passar o mouse aparecer um texto de 20 letras talvez não tenha espaço na mesma linha então o texto ocupará duas linhas e isto faz todo o layout do blog dar um “pulo”, ou seja quando aparece o texto maior e passa a ocupar duas linhas tudo que estiver abaixo dele vai descer um pouco para dar espaço. Então tenha cuidado de verificar se quando passa o mouse o texto continua ocupando o mesmo numero de linhas.

Se quiser pode fazer algo parecido com imagens, veja aqui como fazer para trocar a imagem quando passa o mouse em cima dela.

13 comentários :

  1. Olá,
    Sempre acompanho este blog, porém nunca comentei.
    Hoje venho te cumprimentar pelo carinho que tem em passar essas dicas ótimas para nós blogueiros.
    Já tinha adicionado seu relógio que gosto e muito, agora vou começar a pôr em prática mais dicas.
    Obrigado pela sua dedicação e paciência.
    Parabéns!!!!!!

    ResponderExcluir
  2. Olá..sempre eu estou no seu blog,mais queria saber se tem jeito..Ao ivéz de aparecer o texo, aparecer uma imagem..assim,quando você pasa o mouse sobre ela muda de imagem
    Obrigado

    ResponderExcluir
  3. Esqueci..meu e-mail é henriquebarcelos_12@hotmail.com

    ResponderExcluir
  4. Ola,sou eu de novo...
    como eu disse
    eu tenho um blog: www.sempredegraca.blogspot.com
    Dê uma olhadinha..Hoje fiz o meu baner e gostaria que voce colocasse o meu banner no seu blog..Ja coloquei o seu banner no meu blog tambem =D.
    Obrigado,pois estou precisando de visitas,afinal todo mundo precisa!

    ResponderExcluir
  5. Aqui, Fabiano,estou com as melhores dicas de segurança,tudo sobre travar os botões,impedir seleção,mais permitir que as pessoas digitem e muitas outras coisas que funcionam em qualquer FF,IE,NS.
    Se quiser,como voc dise posso te passar,essa travas sao as que coloquei no meu blog..elas nao garatem 100%,mais dificultam MUITO o trabalho de quem vai coipiar.
    Obrigado,me retorne

    ResponderExcluir
  6. e se eu quiser fazer isto co imagem do imageshack?

    ResponderExcluir
  7. João Pedro M. Fernandes
    veja essa postagem sobre como mudar a imagem quando o mouse está em cima dela
    http://www.dicasparablogs.com.br/2009/02/efeito-em-imagem.html

    obrigado pelo seu comentário, agora colocamos esse link no final da postagem também, assim ficará mais fácil para quem tiver a mesma duvida futuramente

    ResponderExcluir
  8. Teria como mudar a cor do titulo das postagens quando passar o mouse sobre, em vez dela ficar sublinhada ?

    ResponderExcluir
  9. L. Tadeu
    tem que achar o estilo do titulo h2 ou h3 e criar um h3 a:hover{....} a formatação que fizer aqui será usando quando o mouse estiver sobre o titulo

    ResponderExcluir
  10. Valeu Fabiano, era o ultimo efeito que eu queria por no blog ta perfeito agora xD...
    Agora acho que so mecherei no HTMl do blog se tiver algum "Efeito" ou "Hack" novo :P, Valeu pela ajuda, e uma perguntinha, Você add nos "Top parceiros" Blogs que não são relacionados a Criação e Edição de Blogs e etc...
    Até mais Fabiano, valeu pela ajuda.

    ResponderExcluir
  11. nos top parceiros pode aparecer qualquer tipo de blog, menos claro aqueles que não seguem as regras do blogger, plagiadores, conteudo adulto

    ResponderExcluir
  12. seria bom sempre pôr um exemplo em cada postagens dessas, assim não dá pra entender como fica e como faz, por mailtonemep3.blogspot.com/

    ResponderExcluir
  13. ok... já incluímos uma demostração

    ResponderExcluir