Efeito em imagem: Trocar a Imagem Quando Passa o Mouse

Respondendo uma duvida deixada em um de nossos comentários sobre como colocar um efeito no banner de parceria, tamanho 120x60. Existe um código para trocar a imagem quando passamos o mouse sobre ela, é um código simples e funciona perfeitamente, passe o mouse sobre nosso banner ao lado e veja que ele muda, o código para fazer isso é:

<a href="http://jornaljd.blogspot.com"target="_blank" onMouseOver="document.images['myimage'].src='http://img410.imageshack.us/img410/6580/olho2.gif';" onMouseOut="document.images['myimage'].src='http://img22.imageshack.us/img22/7136/jornal.jpg';"><img src="http://img22.imageshack.us/img22/7136/jornal.jpg" border="0" id="myimage"/></a>


Você precisará fazer duas imagens do mesmo tamanho e hospedar a imagem, sugerimos fazer isso no ImageShack se tiver dificuldades para encontrar a url certa da imagem veja essa explicação em video depois é só colocar os endereços das imagens no código acima e pronto. Mas note que uma das imagens é repetida duas vezes no código.

Apesar de falarmos em imagens para banners de parcerias esse código serve para imagens de qualquer tamanho. Outro detalhe que precisamos esclarecer é que esse código apenas troca a imagem mas quando passar o mouse na imagem que usamos como exemplo notará que ela ficou semi transparente a explicação de como fazer isso você encontra em nossa postagem sobre imagens transparentes.
Related Posts with Thumbnails

Link desta Pagina

Compartilhe essa Página

100 comentários:

  1. Vc poderia colocar como deixar a radio off, tipo quando uma pessoa entra no meu blog so liga a radio se quiser.

    meu blog: http://vamp-downloads.blogspot.com/

    obrigado

    ResponderExcluir
  2. algumas radios fornecem essa opção outras não, você tem que ver isso na hora de pegar o código no site da radio porque a maioria delas é impossivel alterar a opção de ligar automaticamente.

    ResponderExcluir
  3. Site muito bom =D

    venho acopanhando a mtuuu tempo ^^

    ResponderExcluir
  4. Legal a dica, eu mesmo não sabia.

    Vou começar a fazer alguns teste em imagens no meu blog, valeu.

    Willian Coutinho
    http://dicasplugins.net

    ResponderExcluir
  5. Vc tem alguma explicação de como fazer o banner? Obrigada.

    ResponderExcluir
  6. EAD
    como fazer banner é complicado pois é edição de imagem, então não tem muito como explicar, mas já postamos uma lista de programas gratis para editar imagens
    http://dicasparablogs.blogspot.com/2008/08/programas-gratuitos-para-edicao-de.html

    ResponderExcluir
  7. Valew brother, sempre com dicar simplies praticas e objetivas.

    ResponderExcluir
  8. só pra avisar, aqui a imagem ta bugada.

    ResponderExcluir
  9. Ricardo Lopes

    obrigado por avisar, já troquei a imagem.

    ResponderExcluir
  10. TENHO QUE DAR MÃOS A PALMATORIA!!
    Você é muito bom, fiquei sabado inteiro procurando e só encontrei aqui. Muito obrigado por nos ajudar!!!!

    ResponderExcluir
  11. boa dica deu certo no meu blog mais na hora que eu coloquei uma imagem do lado da outra ele parou de funcionar vc sabe como e que eu faço para fazer esse codigo em varias imagens uma do lado da outra ou e so em uma

    ResponderExcluir
  12. Cara não tá funcionando não!

    ResponderExcluir
  13. Animações dos Sellens A-S
    talvez esteja usando o endereço errado da imagem, como pode ver nesta postagem o código funciona

    ResponderExcluir
  14. Bom cara mas qdo eu passo o mouse por cima não muda pq será?

    ResponderExcluir
  15. marcos eu so tenho a ti agradecer, pois o seu blog, é muito bom, tenho aprendido de mais,pois é bem explicativo como vc da as dicas,eu estou apenas começando, e pode ter certeza quando tenho alguma duvida corro pro seu blog.
    valeu meu amigo continue assim!
    email-ixnbravo@hotmail.com

    ResponderExcluir
  16. Como eu hospedo a imagem depois de pronto???

    ResponderExcluir
  17. veja aqui como hospedar as imagens
    http://www.dicasparablogs.com.br/2008/12/hospedagem-de-imagens.html

    ResponderExcluir
  18. Fabiano, fiz tudo conforme seu tutorial. coloquei 2 imagnes na sidebar com esse efeito, porem, quando eu passo o mouse sobre o primeiro, a imagem que deveria aparecer, aparece no segundo. Não sei se entendeu, mas preciso de ajuda, meu prazo de entrega de layout esta acabando e eu preciso disso para termina-lo.

    ResponderExcluir
  19. Lucas C. M.

    veja que um endereço de imagem aparece duas vezes no código, talvez esteja colocando os endereço em lugar errado.

    ResponderExcluir
  20. Consegui colocar tudo certinho, mas tenho outro problema agora... a segunda imagem (ao passar o mouse) esta demorando demais para aparecer.

    ResponderExcluir
  21. o tempo que a imagem demora para aparecer tem a ver com o tamanho da imagem, onde está hospedada, velocidade de internet...

    não é possível corrigir isso no código

    ResponderExcluir
  22. Eai amigo bloggeiro tudo bom?
    quero uma ajuda sua fera!!
    como voce faz pra por codigo HTML em seus posts e eles nao se executarem??
    tipo se quando eu for fazer um post assim:

    Ola galera hoje eu vou ensinar a como por titulo no seu blog, entao peguem o codigo abaixo:

    < html>< title>ESCREVA O TITULO

    Me responda no msn ou no meu blog!
    msn: thow4ever@hotmail.com
    thow4ever.blogspot.com

    ResponderExcluir
  23. Thow4EveR
    para publicar codigos use o blogger in draft e veja as opções na pagina de postagens, ou também com um programa para editar html
    Publicar Código

    ResponderExcluir
  24. olha eu ja tentei mil vezes e nao consigo, faço,repito e quando vou ver o resultado ...nada...
    fiz dois banners, coloquei a url do primeiro, depois do segundo e repeti a do segundo, nada...o que sera?ah, aprendi muitas coisas aqui, obrigada.

    ResponderExcluir
  25. É a Nossa " Cara"
    pode acontecer dois erros ao editar esse código, veja se não está cometendo um deles:

    endereço da imagem errada
    lugar dos endereços errada.. apenas um dos endereços tem que repetir duas vezes no código

    ResponderExcluir
  26. Olha eu tentei colocar isso no meu blog, mais eu não entendi a parte dos links, eu fiz tudo como você explicou, mais a imagem não muda, e quando muda se nós tirarmos o mouse a imagem continua lá... Como eu resolvo isso?

    ResponderExcluir
  27. victor giovane kinczel slezinski
    precisa colocar outro endereço de imagem no código, mas veja que um deles aparece duas vezes.

    Imagem não aparece

    ResponderExcluir
  28. Funcionou vlw :D muitos caras estão me perguntando como fazer isto, daí eu digo que aprendi aqui até mando o endereço da imagem vlw aêw :D

    ResponderExcluir
  29. Fabiano, eu queria saber como faz um efeito no banner do blog que já vi em vários blogs, eu sei que é uma animação em flash (swf), é tipo assim, fica tipo uma luz passando por cima do texto, mas como deu faria, um dos sites que tem isso é o downloadsgratis.org.

    ResponderExcluir
  30. o flash é um programa, é um pouco complicado de mexer, mas tem sites que criam banners em flash online, tente pesquisar no google

    ResponderExcluir
  31. Olá..
    muito legal o código,
    e deu tudo certinho no meu blog..
    agora só uma dúvida, como faço para que ao clicar na segunda imagem o link abra na mesma pagina e nao em uma outra?
    pq no original se clicar aparece uma nova pagina, eu gostaria de fazer com que continuasse a mesma janela..

    ResponderExcluir
  32. para abrir na mesma janela apenas retire o trecho target="_blank"

    ResponderExcluir
  33. Muito Obrigado Fabiano, este código foi de gradissíma ultilidade..
    muito sucesso ao seu blog :D

    ResponderExcluir
  34. por favor preciso desesperadamente saber como faço esses efeitos. o endereço é esse
    https://www.comprebouts.com.br/detalhe_produto.php?id=7817.149, onde ao passar o mouse aparece o zoom da parte em que ele esta e ao passar o mouse em cada figura aparece na tela a mesma, por favor me ajudem!!!

    ResponderExcluir
  35. concordo que é um efeito interessante, mas ele envolve muitos códigos com hospedagem externa... enfim seria bem complicado usar no blogger pois seria necessário uma pagina separada somente para ele senão o blog todo ficaria lento por causa de um efeito usando em poucas imagens

    ResponderExcluir
  36. vc naum usa mtos efeitos no seu blog, apesar de saber de tooooooodoooooos

    ResponderExcluir
  37. usar efeitos no blog depende de qual é o seu publico alvo, o que procuram seus visitantes....

    nós falamos sobre como modificar e criar blogs então quem nos visita não procura efeitos na pagina mas quer resolver algum problema no blog, por isso não usamos efeitos

    ResponderExcluir
  38. E para passar o mouse no texto e selecionar a imagem, igual esse post >>> http://migre.me/3Tazu
    Você poderia me sizer como faz? Já procurei muito na net e não encontrei. =(

    ResponderExcluir
  39. Ikaelle Aquino
    você fala sobre aparecer os numeros sobre imagem? é um efeito bem legal, mas precisa de programa para criação de html, pois aquilo é mapeamento da imagem, fazer manualmente dá trabalho demais

    pesquise sobre programa para editar html e mapeamento de imagem.

    ResponderExcluir
  40. Grande Fabiano,

    parabéns pelo seu trabalho, pois tem me ajudado muito.
    quando a este código, me deu o seguinte problema:
    criei um gadget e coloquei o código e as imagens, funcionou perfeitamente, mas se tento colocar mais imagens no mesmo gadget repetindo o código, o efeito aparece sempre na primeira. ex.:

    banner 1 <código com as imagens e link
    banner 2 <código com as imagens e outro link
    banner 3 <código com as imagens e outro link

    quanto passo o mouse sobre o banner 1 o efeito fica OK, mas ao passar sobre o 2 e 3 a 2ª imagem de cada banner vai aparecendo no primeiro banner.

    existe alguma tag ou complemento no código para que os efeitos destes banners funcionem independentes no mesmo gadget?

    muito obrigado.
    abraços

    ResponderExcluir
  41. esse código só faz trocar as imagens, mas só funciona naquela que usou o código, não tem como fazer nada automatico para mais imagens

    ResponderExcluir
  42. Caro Fabiano,

    Muito obrigado pelo retorno. tentarei de outra forma.

    aproveitando o ensejo, vc saberia como resolver um problema ?

    em meu blog quando aberto pelo IE fica um espaço em branco enorme depois que ele termina. vc sabe como resolver ?

    abraços

    ResponderExcluir
  43. já vi blogs com esse espaço... mas como falou é somente no internet explorer.. então fica complicado alterar os códigos para corrigir pois pode gerar erros em outros navegadores que agora estão aparecendo da forma correta

    ResponderExcluir
  44. supeer d+!
    mais eu queria mesmo saber como faz para eu fazer minha home no blogspot?
    pq as minhas postagens vem antes da Pagina Inicial do meu blog(home)
    como fazer a Pagina Inicial do meu blog ficar em 1°?

    ResponderExcluir
  45. Stefany
    a pagina inicial do blog são as postagens mais recentes... não tem como alterar isso

    ResponderExcluir
  46. fabiano você sabe como por paginas numeradas no blogspot?
    se puder me passa o código porfavor

    ResponderExcluir
  47. fico legal so que eu queria que a imagen abrisse na mesma janela como eu faço ?

    ResponderExcluir
  48. tipos e fiser esse mesmo efeito ma imagen duas veses ae elas nao funcionan como faz pra fecha o codigo pra poder colocar o mesmo efeito novamente no mesmo gadget

    ResponderExcluir
  49. JOnathan
    para abrir na mesma janela é só retirar o target="_blank"

    ResponderExcluir
  50. e sim o código é para cada imagem, ou seja para usar em outra terá que repetir o código, mas se quiser que ao passar o mouse aparece a mesma imagem pode usar o mesmo endereço da primeira

    ResponderExcluir
  51. OIe crieii um blog mas naum sei mexer direito dei uma fusadinha e posteii umas coisas mas quero botar coisas interesantes

    ResponderExcluir
  52. Eu estou procurando uma forma de colocar um ícone ao invés de um texto no atributo "alt", ou seja, ao invés de aparecer um texto, aparecer uma pequena imagem de um lupa, você saberia me dizer se tem como, sem usar o flash ou qualquer programa? Só no html.

    ResponderExcluir
  53. Valdir Bressane
    para fazer isso vai precisar de varios códigos, mas não tenho tutorial sobre esse assunto, e nem sei se funcionará no blog

    mas certamente isso deixa a pagina bem mais lenta.

    ResponderExcluir
  54. Fabiano Roberto, valeu a dica, eu estava pensando em fazer no flash, mas parei no fato de realmente pesar muito o site. Obrigado! À propósito sou fã do seu site, muito útil e realmente eficiente, parabéns pelo trabalho.
    Não querendo abusar mas ainda não encontrei resposta para como eliminar o espaço que fica no template depois de removermos a navbar. Você tem alguma dica?

    ResponderExcluir
  55. isso depende muito do template, o que causa esse espaço é uma margem... mas como falei varia conforme o template, então precisaria ver o blog para saber em qual parte do html está o problema

    ResponderExcluir
  56. veja o trecho que modificou para retirar a sidebar e coloque padding:0px;margin:0px;

    ResponderExcluir
  57. Fabiano acho que há um erro nesse seu código ou entaum ele só funciona para 1 imagem a cada Gadget. Pois quando eu adiciono + de 1 imagem, a imagens de nenhum muda ( Ja Olhei se tinha erros nos link da imagem + não tem , até porque quanto eu testo so com 1 imagem no gadget ele pega normalmente). Tem como você dizer como adicionar + que 1, no meu caso é 3 imagens =\.


    Vlws ae

    ResponderExcluir
  58. o efeito desta postagem não é para usar com o botão +1 do google... são coisas totalmente diferentes

    ResponderExcluir
  59. ótimo codigo, fiz algumas modificações para atender minhas necessidades especificas e ficou muito bom. Obrigado, abraços.

    ResponderExcluir
  60. Luiz Alberto
    é justamente essa a idéia mostrar o código para que as pessoas ajustem as necessidade do blog de cada um...

    ResponderExcluir
  61. Olá, eu fiz tudo certinho mas não funciona!

    Por Favor clica no meu nome ae, e vai pro meu Blog pra você ver como não esta funcionando!
    Olhe aquela parte das "Colunas" do Blog foi lá que tentei fazer isso e não consegui!

    Tentei colocar o HTML que utilizei la no BLOG aqui neste comentário mas não consegui!

    Me Ajude Por Favor!

    E-Mail:
    o-grandecurioso@hotmail.com

    ResponderExcluir
  62. Ah! esqueci de dizer que a primeiro momento o HTML Funcionou com umas imagens que já tinha no meu blog! Fiz só pra ver se ia funcionar e funcionou! Mas quando fiz de novo não consegui,
    Até testei colocando seu HTML que você deixou la em sima, eu coloquei ele exatamente como você deixou la em sima em um Gedget (HTML/Javascript) separado, sem nada, limpinho e mesmo assim não funcionou!


    ME AJUDAAAA!

    ResponderExcluir
  63. Olá!!!
    Eu testei a dica e deu certinho,mas eu tenho uma dívuda gostaria de fazer um menu nos gadgets mesmo,sem entrar no html do blog,pq acho mais fácil:) Então ficaria EX:início,contato....
    Mas qdo coloco esse codigo duplicado ele não aceita e anula o efeito do primeiro,tem como fazer isso?

    Agradeço a atenção.

    http://licoisasfemininas.blogspot.com/

    ResponderExcluir
  64. Maurício Jr. - O Grande Curioso
    envie o código como usou para meu email e vou dar uma olhada...

    ResponderExcluir
  65. para usar com mais de um banner tem que trocar o nome myimage no código

    ResponderExcluir
  66. Eu tenho um blog com vários postadores.Isso eu faço bys com imagens.As imagens se mexem mais quando é anexada nao se mexe no blog.

    Por favor, me responda isso o mais rápido possível.De preferência no tumblr.
    Obrigada.

    ResponderExcluir
  67. para usar gif animado no blogger tem que hospedar as imagens fora dele.

    se enviar o gif ao blogger ele converte para outro formato sem a animação do gif

    ResponderExcluir
  68. Eu tenho uma pergunta.
    Como coloca uma imagem no cabeçalho do blogger ai quando passa o mouse aparece outra imagem?

    Quem souber responde por favor!!

    ResponderExcluir
  69. Blog Do Igor
    para fazer isso no cabeçalho o jeito é colocar esse código em um gadget de html/javascript e posicionar no topo da sua pagina

    ResponderExcluir
  70. Por favor, eu gostaria de saber como posso colocar um outro visualizador das fotos. Tipo, a pessoa clica na foto a imagem abre no blog. Eu percebi que no blogger falaram que tem isso, mas isso só deu certo pra mim no nootebook, mas no pc quando clico na imagem ele sai do blog pra visualizar a imagem. Queria colocar um visualizador de imagens que seja bom
    Obrigado

    ResponderExcluir
  71. Anônimo
    o efeito lightbox foi ativado e desativado no blogger essa semana... então precisamos aguardar uns dias para ver o que acontece

    ResponderExcluir
  72. Eu quero um outro tipo de visualização das imagens também. Por favor me ajude, mas quero um visualizador de imagens que seja bom. Por que ja procurei em muitos locais e não consegui encontrar

    ResponderExcluir
  73. Anônimo
    visualizador de imagens? o que está procurando? programa para ver e editar imagens? ou algum efeito?

    ResponderExcluir
  74. Sou eu que fiz a pergunta do visualizador de imagens, tipo, quero um efeito, diferente do que tava automatico no blogger, quando a pessoa clica na imagem ela só almentar de tamanho, mais nada...

    ResponderExcluir
  75. Anonimo
    não tenho esse código... mas efeitos automaticos geralmente deixam a pagina mais lenta.... portanto talvez não seja bom negocio utilizar

    ResponderExcluir
  76. Ok, muito obrigado, adoro esse blog, mas se você pudesse conseguir depois esse código...

    ResponderExcluir
  77. Olá Fabiano :)
    Excelente dica :D
    Será que poderia explicar como fazer um menu com esse efeito,estava tentando fazer por parte,mas esse código ai só vale uma vez :/

    Muito obrigada :D

    ResponderExcluir
  78. Maquele♥
    esse efeito tem que ser colocado uma imagem por vez... não tem outro jeito

    ResponderExcluir
  79. Gênio!!!! Passei duas semanas atrás de um código que funcionasse, testei códigos e css entre outros, e o seu código foi simples fácil e o único que funcionou, brigado, agora eu vou tentar fazer um menu com imagens ao passar o mouse, mas como faço para colocar um menu com esse código na horizontal, ou seja, lado a lado? Se puder me ajudar!

    ResponderExcluir
  80. Júnnyor Grigolo


    você poderia usar esse código: Dividir um gadget em duas colunas

    mas não exagere nas imagens para não deixar o blog muito lento

    ResponderExcluir
  81. Vlw, vc é fera, só tive que arruma o codigo .-.'

    ResponderExcluir
  82. Isso é realmente muito últil, em vez de trocar a imagem, vc sabe como fazer uma imagem aparecer em baixo de outra ao passar o mouse? Pensei em fazer um menu com submenu usando esse princípio.

    ResponderExcluir
  83. Eu queria saber como que faz , pra tipo , a imagem do banner de parceria tá lá , ai quando a pessoa colocar o mouse em cima aparecer a mesma imagem só que com sombra , que nem nesse site , http://www.oloxa.net quando coloca a seta em cima de uma imagem de um blog parceiro a mesma imagem fica com sombra ! queria saber como que faz isso , muito obrigado desde já !

    ResponderExcluir
  84. o endereço do site que citou está indisponivel...

    mas efeitos de sombra não aparecem em todos os navegadores

    ResponderExcluir
  85. quando eu coloco uma imagem ao lado da outra o código não funciona,e a url das imagens está certa. O que pode ser?

    ResponderExcluir
  86. Stephani
    tem que mudar o nome da id para usar em varias imagens na mesma pagina.

    veja que no código tem varias vezes myimage, então se for colocar mais de uma coloque com outro nome pode ser myimage2 e se for colocar mais continue a numeração myimage3, myimage4...

    ResponderExcluir
  87. Fabiano, me ensina a fazer testes como esse: http://www.trechyteen.com/2012/04/qual-seria-sua-funcao-em-uma-revista.html?m=O
    por favoor. Tô precisando muiito.

    ResponderExcluir
  88. Junior Mota

    qual efeito? se for aquela da imagem é gerado pelo site fashiolista.com

    ResponderExcluir
  89. Como assim? Eu me refiro a como fazer estes testezinhos, como naquele blog q te mostrei. Que ao clicar em uma imagem, aparece outra no lugar.

    ResponderExcluir
  90. não sei sobre qual código está falando.

    quando clica em uma imagem ela vai para outra pagina

    ResponderExcluir
  91. Amigo, me ajuda por favor.

    Primeiramente obrigado pelo código, era isso que estava procurando, porém que fazer algo além.

    Como faço para colocar mais imagens com este efeito, porém precisa ficar na vertical, eu coloquei dois códigos iguais, mas as imagens ficam um do lado da outra e quando o passa o mouse, nem mudam para outra image.

    ResponderExcluir
  92. para ficar uma embaixo da outra use a tag < br/ > para pular uma linha entre as imagens

    ResponderExcluir
  93. tem como mudar a imagem quando passar o mouse por cima, e ainda, quando clicar, mudar de site?

    ResponderExcluir
  94. esse código não funciona com o ponteiro do mouse

    ResponderExcluir
  95. me ajuda fazer igual este site
    http://mangareader.com.br/Online/greenblood-capitulo-25/45463-lions-scan

    tipo qnd vc clica na imagem ele vai pro segundo e desaparece o primeiro
    e ainda se vc utlizar seta para direita ou esquerda troca de imagem
    por favor como faz isso?

    ResponderExcluir
  96. esse site usa algum tipo de script para criar slides... mas não é no blogger, ou seja precisa editar os códigos manualmente

    ResponderExcluir
  97. e como faz isso vc sabe? ou existe algum tutorial queria mt faze isso tbm

    ResponderExcluir
  98. tem que procurar por codigos para fazer slides, mas precisa saber um pouco de html para trabalhar com isso

    ResponderExcluir