Login: Senha: Registrar-se - Esqueci minha senha
.: Menu
Home
Artigos
Sign. dos Sonhos
Papel de Parede
Ilusões de Ótica
.: Bancos
Emoticons e Gifs
Ícones
Logos
.: Serviços
Mural de Recados
Usuários Online
Bloco de Notas
Formmail
Meu IP
.: Geradores
Gerador de Senhas
Barra de Rolagem
Recomende
Pop-up
Inverter Link
.: Canais
Apostilas
Arte/Cultura
Blog
Busca
Celular
Downloads
E-mail Grátis
Emoticons
Esportes
Filmes
Flogs
Fontes
GTA Mods
Host Grátis
Humor
Infantil
Informática
Jogos
Jogos Online
Linux
Músicas
Notícias
Offline
Redirecionadores
Sites Parceiros
Webdesigners
Webmasters
.: Na Faixa
Sobre
Contato
Recomende-nos
Termos de uso

Menu que muda de cor quando passa o mouse em cima

Enviado em 29/03/2007 - 06:41
Fonte: A A A A

Vamos aprender a criar um menu que quando passa o mouse por do menu ele muda de cor.

Para isso usaremos o Javascript, tem outras formas de fazer a mesma coisa, mas vou mostrar em uma das formas mais praticas.

Vamos usar a seguinte função para isso.
  1. <script>
  2. function muda(esse)
  3. {
  4.     if (esse.bgColor=='#cccccc')
  5.         {
  6.             esse.bgColor='#dddddd';
  7.         }
  8.     else
  9.         {
  10.             esse.bgColor='#cccccc';
  11.         }
  12. }
  13. </script>
Explicação basica sobre a função.
Ela verifica se a celula onde o mouse está em cima está com a cor #cccccc se estiver ela poe a cor #dddddd caso contrario ela coloca novamente a cor #cccccc.

Por isso sempre cada chamada da função no caso onmouseover e onmouseover(proximo codigo) sempre vao mostrar cores opostas, criando o efeito de quando o mouse estiver em cima muda de cor depois volta ao normal.

Agora que já temos a função vamos ao código html do menu.

  1. <table width="150">
  2. <tr bgcolor="#cccccc" onMouseOver="muda(this)" onMouseOut="muda(this)"><td>Link 1</td></tr>
  3. <tr bgcolor="#cccccc" onMouseOver="muda(this)" onMouseOut="muda(this)"><td>Link 2</td></tr>
  4. <tr bgcolor="#cccccc" onMouseOver="muda(this)" onMouseOut="muda(this)"><td>Link 3</td></tr>
  5. <tr bgcolor="#cccccc" onMouseOver="muda(this)" onMouseOut="muda(this)"><td>Link 4</td></tr>
  6. </table>
Nas linhas dessa table agora, nós apenas chamamos a função em JS criada lá em cima, e ela se encarrega de fazer o processo com o onmouseover e o onmouseout.

Para adicionar mais  linhas basta copiar uma linha da tabela e duplical-la.

É isso.

Abraços.

Enviado por: brunohcs

Esse artigo foi visualizado 7105 vezes

Compartilhe este artigo
facebook del.icio.us rec6 digg
Recomende este artigo a um amigo


Voltar
>> Comentários
 
Related Posts Plugin for WordPress, Blogger...
Comentar
André Coment: Tão simples!
 
Buscar Artigos:
.: Mods de GTA
GTA SA, VC, IV
SA - Carros
IV - Carros
Mods
GTA IV
SA - Mods Cleo
.: Saúde
Calculadora de IMC
Peso Ideal
Artigos de Saúde
.: Jogos Online
Ação
Aventura
Cassino
Classicos
Colorir
Corrida
Educativos
Esporte
Estrategia
Infantil
Luta
Meninas
Nave
Tiro
Outros
Adulto
Top Jogos
.: Parceiros
Mural de Recados Grátis
Papel de Parede
Show Moto
Web Visual
.: Nossos Números
Artigos: 930
Categorias: 50
Comentarios: 1863
Usuarios: 26631
Blocos de Nota: 87
Canais: 169

website monitoring service
eXTReMe Tracker
Na Faixa.net - Todos os direitos reservados. 12/2003 - 03/2024
Leia nossos Termos de Uso - Política de Privacidade
Desenvolvido por Web Visual
Crie seu Site - Papel de Parede Grátis - Show Moto - Mural de Recados Grátis - Dicas10