Webly

Internet + Humana

Ir para o Conteúdo
Ir para o Menu
Ir para a Busca
Ir para o Login

Assine:

Navegação

Eventos Onmouseover E Onmouseout

Trabalhando com a class da td

Escrito por renatoM em JavaScript e Ajax. Data: 15/06/2008

Ver tópico original no fórum.

Bom, vou postar a baixo um exemplo de como trocar a class da td no mouseover(mouse em cima da td) e voltar a class atual no mouseout(quando o mouse sai de cima da td).

Exemplo bem simples mais bem util, sempre me foge da cabeça quando preciso utilizar rs...

CODE

<html>
<head>
<title>Dica JS: Função para trocar a cor da TD nos eventos MouseOver e MouseOut</title>
<head>
<style type="text/css">
     .td1 {
         background-color:#FFFFFF;
     }
     .td2 {
         background-color:#FF0000;
     }
</style>
<body bgcolor="black" text="white">
<br>
<br>
<h3>Dica JS: Função para trocar a cor e cursor da TD nos eventos MouseOver e MouseOut</h3>
<br>
<table width="300" border="0">
   <tr>
     <td align="center" class='td1' onMouseOver=this.className='td2' onMouseOut=this.className='td1'><a href='aaaaaaaaa'>Over</a></td>
      <td align="center" class='td1' onMouseOver=this.className='td2' onMouseOut=this.className='td1'><a href='aaaaaaaaa'>Over</a></td>
       <td align="center" class='td1' onMouseOver=this.className='td2' onMouseOut=this.className='td1'><a href='aaaaaaaaa'>Over</a></td>
        <td align="center" class='td1' onMouseOver=this.className='td2' onMouseOut=this.className='td1'><a href='aaaaaaaaa'>Over</a></td>
   </tr>
</table>
</body>
</html>

Obs: caso queira trabalhar com a propriedade style dentro da td manipulando o bgcolor segue exemplo abaixo:

CODE

<td bgcolor='ffffff' onMouseOver=this.style.backgroundColor='#ff0000' onMouseOut=this.style.backgroundColor='#ffffff'><a href='aaaaaaaaa'>Incluir</a></td>

Bom espero que seja util pra alguem, é uma conhecimento básico de js, mais algumas pessoas não tem o conhecimento de como é fácil manipular.

Abraços equipe Webly...

Você gostou? Comente no fórum!

Comentários:

Micox disse:

CAra, faltaram algumas aspas aí pra não dar erro.

renatoM disse:

Então no IE6, 7 e no firefox2.0.. funciona normal esse código.
Eu tenho mania mesmo por default usar aspas simples...

Micox disse:

O problema não são as aspas simples, eu mesmo só uso aspas simples (apostrofo).

O problema é a falta de aspas, apóstrofo, qualquer cooisa, enblogando o que estiver após o onMouseQualquerCoisa.

renatoM disse:

Tendeu, bom como não tem como editar, não aparece a opção pra mim..
Fica a preferencia, caso a pessoa necessite por, basta inserir aspas dupla(") no evento onMouseOver="this.className='td2'" e onMouseOut="this.className='td1'".

Mais acho que deu pra ser claro no artigo, foi uma duvida que eu tive, pesquisei na internet achei e resolvi divulgar tbm.

Espero ter ajudado...

Ver o restante dos comentários no fórum (e aproveitar pra comentar também !).

Mais recentes em JavaScript e Ajax

Validador de formulário: Por carlosmborgesjr - Boa tarde, - cara, seu validador ficou muito bom, muito...
[prototype]classe de utilidades - continuação: Por Carutcho - Continuação da classe, método setattrib...
[prototype]classe de utilidades: Por Carutcho - Criando classe de utilidades aos poucos....
O que permite várias requisições: Por VBRSOFT - Olá micox, - parabéns, é um excelente script! -...
Accordion menu - mootools: Por dragun - Menu sanfona...

Ver mais Artigos de JavaScript e Ajax.

Ver e retirar outras dúvidas no fórum Webly.

Webly Portal e Fóruns - Internet + Humana | Design by ArthurHenrique.com