Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Mais de 1000 postagens
Mais de 1000 postagens
Tópico Autor
Mensagens: 1254
Sexo: Masculino

trocar cor de linha com onmouseover onmouseover e onclick

07-05-2009 11:59

Olá! Eu já sei trocar a cor de uma linha ao se passar o mouse sobre ela. Entretanto, eu gostaria que, além de se trocar a cor ao passar o mouse, ao se clicar em determinada linha, esta assumisse uma terceira cor além das referentes aos movimentos do mouse, e, ao se clicar novamente na linha com a terceira cor, ela assumisse a cor de onmouseover, desativando a terceira cor. Isso pode ser conferido no PHPMYADMIN, ao se visualizar os valores de uma tabela. Encontrei alguns códigos parecidos: um deles, faz mudar a cor de células dos links, como nos links deste site:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> .page, .pageon { border: 1px solid black; font-family: arial, verdana; font-size: 10px; font-weight: normal; color: #000000; overflow:hidden; } .page a, .pageon a { padding: 0 5px; color: #000000; display:block; width:100%; height:100%; } .pageon a { color: #FFFFFF; background-color: #C40000; } .page a:visited { color: #000000; } .pageon a:visited { color: #FFFFFF; background-color: #C40000; } .page a:hover, .pageon a:hover { color: #FFFFFF; background-color: #C40000; } .pageon { color: #FFFFFF; background-color: #C40000; } </style> <!--[if IE]> <style type="text/css"> .page a, .pageon a { display:inline; } </style> <![endif]--> <script type="text/javascript"> function toggleCells(el){ rCells=document.getElementsByTagName('td'); for (i = 0; i < rCells.length; i++) if (rCells[i].className=='pageon') rCells[i].className='page' el.className='pageon' } </script> </head> <body> <table align="center" cellpadding="0" cellspacing="2" border="1"> <tr> <td class="page" onclick="toggleCells(this);"><a href="#">1</a></td> <td class="page" onclick="toggleCells(this);"><a href="#">2</a></td> <td class="page" onclick="toggleCells(this);"><a href="#">3</a></td> </tr> </table> </body> </html>

Fiz uma adaptação para o script funcionar com linhas (tr) ao invés de células (td): troquei no código javascript td por tr, transferi o class e o onclick para as linhas, e tirei o href. Está funcionando parcialmente. As cores do onclick funcionam. Ou seja, se clico na linha, ela muda de cor. Mas não estou conseguindo trabalhar com o onmouseover e onmouseout.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> .page, .pageon { border: 1px solid black; font-family: arial, verdana; font-size: 10px; font-weight: normal; color: #000000; overflow:hidden; } .page a, .pageon a { padding: 0 5px; color: #000000; display:block; width:100%; height:100%; } .pageon a { color: #000000; background-color: #C40000; } .page a:visited { color: #000000; } .pageon a:visited { color: #000000; background-color: #C40000; } .page a:hover, .pageon a:hover { color: #FFFFFF; background-color: #C40000; } .pageon { color: #000000; background-color: #C40000; } </style> <!--[if IE]> <style type="text/css"> .page a, .pageon a { display:inline; } </style> <![endif]--> <script type="text/javascript"> function toggleCells(el){ rCells=document.getElementsByTagName('tr'); for (i = 0; i < rCells.length; i++) if (rCells[i].className=='pageon') rCells[i].className='page' el.className='pageon' } </script> </head> <body> <table align="center" cellpadding="0" cellspacing="2" border="1"> <tr class="page" onclick="toggleCells(this);"> <td>teste</td> </tr> <tr class="page" onclick="toggleCells(this);"> <td>teste</td> </tr> <tr class="page" onclick="toggleCells(this);"> <td>teste</td> </tr> </table> </body> </html>

Como resolvo isso? Acredito que o problema esteja no CSS.
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17548
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

trocar cor de linha com onmouseover onmouseover e onclick

07-05-2009 14:24

Tem uma versão nesse link abaixo, só filtrar o que não precisa

http://www.easy-share.com/1905083583/phpmyadmin.zip
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 1000 postagens
Mais de 1000 postagens
Tópico Autor
Mensagens: 1254
Sexo: Masculino

trocar cor de linha com onmouseover onmouseover e onclick

07-05-2009 14:47

Beleza. Vou testar, depois retorno. Grato.
0
 
Mais de 1000 postagens
Mais de 1000 postagens
Tópico Autor
Mensagens: 1254
Sexo: Masculino

trocar cor de linha com onmouseover onmouseover e onclick

07-05-2009 15:32

Cara, eu ia dizer que foi na veia. Mas bateu na trave. Os eventos onmouseover e onmouseout não estão funcionando no FF, apenas no IE. Vou tentar descobrir o que ocorre.
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17548
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

trocar cor de linha com onmouseover onmouseover e onclick

07-05-2009 16:08

É o doctype, coloca ele.
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 1000 postagens
Mais de 1000 postagens
Tópico Autor
Mensagens: 1254
Sexo: Masculino

trocar cor de linha com onmouseover onmouseover e onclick

07-05-2009 16:09

É abusar perguntar como faço? Onde e como coloco? No form?
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17548
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

trocar cor de linha com onmouseover onmouseover e onclick

07-05-2009 16:12

Segue um

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Será a primeira linha do documento.
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 1000 postagens
Mais de 1000 postagens
Tópico Autor
Mensagens: 1254
Sexo: Masculino

trocar cor de linha com onmouseover onmouseover e onclick

07-05-2009 16:13

Cara, foi gol. Obrigado pelo passe:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17548
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

trocar cor de linha com onmouseover onmouseover e onclick

07-05-2009 16:22

:)
0
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Bing [Bot]