Início > Windows > Como fazer efeito OnMouseOver em HTML

Como fazer efeito OnMouseOver em HTML

7 de outubro de 2008 Deixe um comentário Go to comments

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

Categorias:Windows Tags:, , , ,
  1. Felipe
    20 de março de 2009 às 18:21

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

  2. Cleber
    13 de agosto de 2009 às 14:28

    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

    • 12 de maio de 2012 às 23:43

      Se for usar no Blogger; ou WordPress, hospede a imagem no Imgur.com e troque o teste.jpg pelo link da Imagem .-.

  3. Renan
    18 de agosto de 2009 às 11:44

    Aqui também não deu. Ele não acha a imagem por algum motivo.

  4. ronald
    22 de julho de 2010 às 18:22

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

  5. Carlos
    8 de novembro de 2010 às 18:49

    Como eu faço para posicionar a imagem onde eu quero ?

  6. 13 de dezembro de 2010 às 23:52

    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’

  7. 13 de abril de 2011 às 19:11

    Seu site é muito bom!
    Mas onde construo a imagem?

  8. Adriana
    11 de maio de 2011 às 23:47

    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!

  9. Anderson
    13 de maio de 2011 às 19:33

    Código perfeito. Após alguns ajustes pude passar o mouse na imagem para ela se transformar em outra. Muito legal. Valeu mesmo.

  10. 13 de junho de 2011 às 17:45

    Ajudou Muito mesmo Cara!

  11. Beto
    19 de outubro de 2011 às 15:52

    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

  12. 28 de setembro de 2012 às 16:04

    Aqui não funcionou,
    Outra maneira de como criar o efeito, Assim funciona:
    http://guiab.blogspot.com.br/2009/03/onmouseovermuda-imagem.html

  13. Fabiano Ricardo
    7 de novembro de 2013 às 13:08

    Depois de uma semana de busca achei este código que funciona perfeitamente como eu queria.
    Muito obrigado pela ajuda.

  14. Google
    16 de dezembro de 2013 às 21:29

    amei!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

  15. [Adm]Lucas
    16 de dezembro de 2013 às 21:32

    Visitem aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

    a

    a

    a

    a

    a

    a

  1. No trackbacks yet.

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: