Como fazer efeito OnMouseOver em HTML
<!–[endif]–><!–[if gte mso 9]> Normal 0 21 false false false PT-BR X-NONE X-NONE MicrosoftInternetExplorer4 <![endif]–><!–[if gte mso 9]> <![endif]–> <!–[endif]–>
Uma aluna da minha esposa está com uma dúvida sobre como fazer um efeito do tipo “On Mouse Over” em html. Para quem não sabe, trata-se de um efeito muito utilizado na “era” html (não existiam flashs, applets java, os recursos eram escassos…) para fazer botões. Você cria uma imagem como se fosse um botão, com link, e ao passar o mouse sobre essa imagem, ela muda de cor, por exemplo. Bobinho mas muito utilizado há uns 10 anos atrás… Já faziam anos que eu não trabalhava com html. Hoje em dia existem várias ferramentas para se montar sites, onde você não precisa ter muitos conhecimentos desse tipo. Fiz então uma busca no sr. Google para dar aquela recordada e montei um exemplo. Fiz um botão simples, nada muito sofisticado. Vejamos:
1) Monte duas imagens, que podem ser feitas até no Paintbrush (as minhas, fiz no Power Point):
<!–[if gte vml 1]> <![endif]–><!–[if !vml]–><!–[endif]–><!–[if gte vml 1]> <![endif]–><!–[if !vml]–><!–[endif]–>
Em seguida, vamos criar uma página html simples e adicionar uma linha a ela:
<html>
<head></head>
<body>
<a href=”x.html” onmouseover=”image.src=’teste1.jpg'” onmouseout=”image.src=’teste.jpg'”><img name=’image’ id=’image’ src=”teste.jpg” width=130 border=no></a>
</body>
</html>
Vamos às explicações:
– As tags <html><head></head><body> já devem ser conhecidas pelo caro leitor afinal, trata-se de tags básicas de html.
– A linha adicionada (<a href=”x.html” onmouseover=”image.src=’teste1.jpg'” onmouseout=”image.src=’teste.jpg'”><img name=’image’ id=’image’ src=”teste.jpg” width=130 border=no></a>) pode ser dividida em algumas partes, para o melhor entendimento:
I) <a href=”x.html” – esta é facil, é um link comum para uma página de seu site, a x.html
II) onmouseover=”image.src=’teste1.jpg’” – este é o comando em questão, para quando o mouse passar por cima da imagem: onmouseover. O image.src se refere à imagem que iremos adicionar adiante, no parâmetro <img name=’image’ src=”teste.jpg”.
III) onmouseout=”image.src=’teste.jpg’” – este comando é para quando o mouse sair de cima da imagem. Neste caso, coloquei para retornar à primeira imagem.
IV) width=130 border=no – o width determina a largura da imagem. Um outro comando, height, determinaria a altura, mas preferi não utilizar. O border=yes deixaria a imagem com uma pequena borda em torno dela. Preferi deixar setado como “no”.
De certa forma, é algo simples, mas útil. Seu site ficará bem leve ao utilizar esta técnica e, dependendo dos botões que você fizer, irão parecer flash!
Espero que seja útil!
Abraços
Analistas de Suporte 
Ótimo post, estava querendo fazer um botão sem usar flash e sem usar o a:hover… Sabia da existência do onmouseout e over mas não sabia utilizá-los.
Muito obrigado pela ajuda!
Abraços.
Não deu certo aqui na minha máquina não.
Não sei onde está o problema, fiz passo a passo como está mostrando, mas não deu em nada.
ele até mostra onde seria mostrado a imagem mas não busca a mesma.
Parece um erro de sintaxe, rsrs.
Abraços
Se for usar no Blogger; ou WordPress, hospede a imagem no Imgur.com e troque o teste.jpg pelo link da Imagem .-.
Aqui também não deu. Ele não acha a imagem por algum motivo.
Ainda não inventaram uma palavra superior a EXELENTE”… vc me ajudou muito… estava ficando cansado de procurar na net um jeito de fazer botão animado no html… estou começando agora no html e ainda tenho muitas duvidas… pena que nao acho muito sobre html que realmente ajude a montar uma página completa.. disse completa mesmo… Vc é o cara… muito bom mesmo..
Como eu faço para posicionar a imagem onde eu quero ?
Aqui dá erro quando tento colocar vários botões. Funciona num botão só, mas se faço Ctrl+c Ctrl+v para fazer nos outros botões simplesmente TODOS não funciona. Se deixo só 1 funciona. Oo’
Seu site é muito bom!
Mas onde construo a imagem?
Amei a explicação.
Demorei um pouco para perceber que tinha que nomear as imagens em 1, 2, 3 etc… de acordo com a quantidade de imagens que eu uso na pagina. Ficou assim, sendo o X cada numero:
Muito obrigada!
Código perfeito. Após alguns ajustes pude passar o mouse na imagem para ela se transformar em outra. Muito legal. Valeu mesmo.
Ajudou Muito mesmo Cara!
Forma correta de fazer onmouse, do site do Kassio Romulo, me quebrou um galhão.
http://kassioromulo.blogspot.com/2011/05/efeito-mouseover-ao-passar-mouse-sobre.html
Aqui não funcionou,
Outra maneira de como criar o efeito, Assim funciona:
http://guiab.blogspot.com.br/2009/03/onmouseovermuda-imagem.html
Depois de uma semana de busca achei este código que funciona perfeitamente como eu queria.
Muito obrigado pela ajuda.
amei!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Visitem aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
a
a
a
a
a
a