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
Efeito em imagem: Trocar a Imagem Quando Passa o Mouse
4/ 5
Oleh

100 Comentários

24 de fevereiro de 2009 20:09 delete

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

Reply
24 de fevereiro de 2009 20:56 delete

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.

Reply
24 de fevereiro de 2009 21:07 delete

Site muito bom =D

venho acopanhando a mtuuu tempo ^^

Reply
25 de fevereiro de 2009 23:37 delete

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

Reply
EAD
1 de março de 2009 01:32 delete

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

Reply
1 de março de 2009 02:13 delete

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

Reply
2 de junho de 2009 13:01 delete

Valew brother, sempre com dicar simplies praticas e objetivas.

Reply
9 de julho de 2009 09:13 delete

só pra avisar, aqui a imagem ta bugada.

Reply
9 de julho de 2009 13:36 delete

Ricardo Lopes

obrigado por avisar, já troquei a imagem.

Reply
18 de julho de 2009 23:01 delete

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

Reply
1 de agosto de 2009 01:36 delete

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

Reply
Anônimo
21 de agosto de 2009 14:04 delete

Cara não tá funcionando não!

Reply
21 de agosto de 2009 17:32 delete

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

Reply
Anônimo
21 de agosto de 2009 22:37 delete

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

Reply
18 de outubro de 2009 22:28 delete

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

Reply
6 de janeiro de 2010 19:51 delete

Como eu hospedo a imagem depois de pronto???

Reply
7 de janeiro de 2010 16:05 delete

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

Reply
14 de janeiro de 2010 15:18 delete

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.

Reply
14 de janeiro de 2010 15:54 delete

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.

Reply
14 de janeiro de 2010 18:14 delete

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

Reply
15 de janeiro de 2010 19:05 delete

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

Reply
13 de abril de 2010 01:26 delete

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

Reply
13 de abril de 2010 15:02 delete

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

Reply
23 de abril de 2010 00:48 delete

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.

Reply
23 de abril de 2010 12:52 delete

É 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

Reply
3 de maio de 2010 11:34 delete

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?

Reply
3 de maio de 2010 15:36 delete

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

Reply
9 de maio de 2010 14:06 delete

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

Reply
Enricopv
26 de julho de 2010 17:57 delete

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.

Reply
27 de julho de 2010 14:36 delete

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

Reply
26 de agosto de 2010 21:58 delete

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..

Reply
27 de agosto de 2010 14:41 delete

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

Reply
31 de agosto de 2010 22:37 delete

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

Reply
Anônimo
7 de janeiro de 2011 14:30 delete

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!!!

Reply
7 de janeiro de 2011 18:34 delete

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

Reply
26 de janeiro de 2011 03:12 delete

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

Reply
26 de janeiro de 2011 15:29 delete

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

Reply
16 de fevereiro de 2011 12:40 delete

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. =(

Reply
16 de fevereiro de 2011 14:19 delete

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.

Reply
6 de março de 2011 02:34 delete

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

Reply
6 de março de 2011 17:06 delete

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

Reply
8 de março de 2011 16:05 delete

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

Reply
8 de março de 2011 21:19 delete

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

Reply
12 de março de 2011 17:49 delete

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°?

Reply
12 de março de 2011 18:46 delete

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

Reply
16 de março de 2011 22:07 delete

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

Reply
17 de abril de 2011 11:41 delete

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

Reply
17 de abril de 2011 12:18 delete

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

Reply
17 de abril de 2011 14:18 delete

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

Reply
17 de abril de 2011 14:19 delete

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

Reply
4 de maio de 2011 11:20 delete

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

Reply
10 de maio de 2011 20:58 delete

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.

Reply
11 de maio de 2011 14:33 delete

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.

Reply
11 de maio de 2011 18:33 delete

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?

Reply
12 de maio de 2011 14:02 delete

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

Reply
13 de maio de 2011 15:04 delete

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

Reply
15 de agosto de 2011 18:42 delete

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

Reply
16 de agosto de 2011 00:24 delete

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

Reply
18 de agosto de 2011 16:48 delete

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

Reply
18 de agosto de 2011 16:53 delete

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

Reply
19 de agosto de 2011 17:14 delete

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

Reply
19 de agosto de 2011 17:22 delete

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!

Reply
20 de agosto de 2011 00:57 delete

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/

Reply
20 de agosto de 2011 01:52 delete

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

Reply
20 de agosto de 2011 01:53 delete

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

Reply
26 de agosto de 2011 17:48 delete

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.

Reply
27 de agosto de 2011 00:08 delete

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

Reply
10 de setembro de 2011 14:06 delete

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!!

Reply
10 de setembro de 2011 15:35 delete

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

Reply
Anônimo
23 de setembro de 2011 16:56 delete

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

Reply
23 de setembro de 2011 19:54 delete

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

Reply
Anônimo
24 de setembro de 2011 10:12 delete

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

Reply
24 de setembro de 2011 15:57 delete

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

Reply
Anônimo
7 de outubro de 2011 23:01 delete

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...

Reply
8 de outubro de 2011 00:29 delete

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

Reply
Anônimo
8 de outubro de 2011 22:21 delete

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

Reply
3 de novembro de 2011 01:36 delete

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

Reply
3 de novembro de 2011 14:55 delete

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

Reply
26 de janeiro de 2012 00:35 delete

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!

Reply
26 de janeiro de 2012 16:21 delete

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

Reply
29 de janeiro de 2012 15:26 delete

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

Reply
11 de fevereiro de 2012 23:10 delete

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.

Reply
3 de março de 2012 16:44 delete

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á !

Reply
4 de março de 2012 00:05 delete

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

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

Reply
6 de março de 2012 09:29 delete

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?

Reply
6 de março de 2012 14:19 delete

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...

Reply
Junior Mota
2 de maio de 2012 12:15 delete

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.

Reply
2 de maio de 2012 14:24 delete

Junior Mota

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

Reply
Junior Moota
2 de maio de 2012 18:11 delete

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.

Reply
3 de maio de 2012 16:27 delete

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

quando clica em uma imagem ela vai para outra pagina

Reply
19 de dezembro de 2012 10:15 delete

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.

Reply
19 de dezembro de 2012 14:18 delete

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

Reply
3 de março de 2013 09:27 delete

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

Reply
3 de março de 2013 17:03 delete

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

Reply
roger
24 de maio de 2013 16:58 delete

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?

Reply
24 de maio de 2013 17:15 delete

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

Reply
roger
24 de maio de 2013 20:25 delete

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

Reply
24 de maio de 2013 23:37 delete

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

Reply