<!–[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
Arquivado em: Windows | Etiquetado: botão, efeito, html, onmouseover, sites
Ó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
Aqui também não deu. Ele não acha a imagem por algum motivo.