Ir para conteúdo
Fórum Script Brasil
  • 0

Mudar a cor ao passar o Mouse

Eder

Perguntado por Eder,

 Share

Pergunta

11 respostass a esta questão

Posts Recomendados

  • 0
Eder

Eder

Postado
  • Autor
Postado

Ola...pesquisei e achei este codigo...teste e funciona exatamente como preciso....com uma tabela.

porem ....eu tenho duas tabelas.....e não consegui adaptar para funcionar com as duas tabelas...

codigo abaixo:

<script>
window.onload=function(){
var tabela=document.getElementById("tabela1")

for(var celula in tabela.getElementsByTagName("tr")){
tabela.getElementsByTagName("tr")[celula].onmouseover=function(){this.style.background="red"}
tabela.getElementsByTagName("tr")[celula].onmouseout=function(){this.style.background="white"}
}

}
</script></head>

<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">

<table border id="tabela1">
    <tr>
        <td><p>C&eacute;lula</td>
        <td><p>C&eacute;lula</td>
        <td><p>C&eacute;lula</td>
    </tr>
    <tr>
        <td><p>C&eacute;lula</td>
        <td><p>C&eacute;lula</td>
        <td><p>C&eacute;lula</td>
    </tr>
    <tr>
        <td><p>&nbsp;</td>
        <td><p>&nbsp;</td>
        <td><p>&nbsp;</td>
    </tr>
    <tr>
        <td><p>&nbsp;</td>
        <td><p>&nbsp;</td>
        <td><p>&nbsp;</td>
    </tr>
    <tr>
        <td><p>&nbsp;</td>
        <td><p>&nbsp;</td>
        <td><p>&nbsp;</td>
    </tr>
    <tr>
        <td><p>C&eacute;lula</td>
        <td><p>C&eacute;lula</td>
        <td><p>C&eacute;lula</td>
    </tr>
    <tr>
        <td><p>&nbsp;</td>
        <td><p>&nbsp;</td>
        <td><p>&nbsp;</td>
    </tr>
</table>
</body>

Terias uma ideia de como fazer para funcionar com duas tabelas ou mais??

Grato

Link para o comentário
Compartilhar em outros sites
  • 0
Eder

Eder

Postado
  • Autor
Postado
Coloca todas as tabelas com a mesma ID... pois nessa linha:

var tabela=document.getElementById("tabela1")

Você restringe o funcionamento do código a tabela que tiver o ID = tabela1...

R.: Sim ESerra eu já havia feito com esta idéia sua...mas não funca.....

segue o codigo, se você quizer fazer um testezinho ai....aqui pelo menos não funca.

<script>
window.onload=function(){
var tabela=document.getElementById("tabela1")

for(var celula in tabela.getElementsByTagName("tr")){
tabela.getElementsByTagName("tr")[celula].onmouseover=function(){this.style.background="red"}
tabela.getElementsByTagName("tr")[celula].onmouseout=function(){this.style.background="white"}
}

}
</script></head>

<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">

<table border id="tabela1">
    <tr>
        <td><p>C&eacute;lula</td>
        <td><p>C&eacute;lula</td>
        <td><p>C&eacute;lula</td>
    </tr>
    <tr>
        <td><p>C&eacute;lula</td>
        <td><p>C&eacute;lula</td>
        <td><p>C&eacute;lula</td>
    </tr>
    <tr>
        <td><p>&nbsp;</td>
        <td><p>&nbsp;</td>
        <td><p>&nbsp;</td>
    </tr>
    <tr>
        <td><p>&nbsp;</td>
        <td><p>&nbsp;</td>
        <td><p>&nbsp;</td>
    </tr>
    <tr>
        <td><p>&nbsp;</td>
        <td><p>&nbsp;</td>
        <td><p>&nbsp;</td>
    </tr>
    <tr>
        <td><p>C&eacute;lula</td>
        <td><p>C&eacute;lula</td>
        <td><p>C&eacute;lula</td>
    </tr>
    <tr>
        <td><p>&nbsp;</td>
        <td><p>&nbsp;</td>
        <td><p>&nbsp;</td>
    </tr>
</table>
<table border id="tabela1">
    <tr>
        <td><p>C&eacute;lula</td>
        <td><p>C&eacute;lula</td>
        <td><p>C&eacute;lula</td>
    </tr>
    <tr>
        <td><p>C&eacute;lula</td>
        <td><p>C&eacute;lula</td>
        <td><p>C&eacute;lula</td>
    </tr>
    <tr>
        <td><p>&nbsp;</td>
        <td><p>&nbsp;</td>
        <td><p>&nbsp;</td>
    </tr>
    <tr>
        <td><p>&nbsp;</td>
        <td><p>&nbsp;</td>
        <td><p>&nbsp;</td>
    </tr>
    <tr>
        <td><p>&nbsp;</td>
        <td><p>&nbsp;</td>
        <td><p>&nbsp;</td>
    </tr>
    <tr>
        <td><p>C&eacute;lula</td>
        <td><p>C&eacute;lula</td>
        <td><p>C&eacute;lula</td>
    </tr>
    <tr>
        <td><p>&nbsp;</td>
        <td><p>&nbsp;</td>
        <td><p>&nbsp;</td>
    </tr>
</table>
</body>

</html>

Grato :)

Link para o comentário
Compartilhar em outros sites
  • 0
KaKarotto

KaKarotto

Postado
Postado

Está funcionando perfeitamente.

Lembrando que o trecho html que passou tem erro, ele começa de um script, o formato não é html.

NÃO PODE HAVER DOIS ELEMENTOS EM UMA PÁGINA COMO MESMO ID

Nunca se esqueça disso. Se deseja que esse efeito seja reproduzido em mais de uma tabela, então deve usar classes. O javascript pegaria apenas os elementos que contivessem aquela classe para introduzir o efeito.

Agora, Éder, esse tipo de efeito é geralmente usado quando você pode selecionar uma opção. Não faz sentido você fazer o td ficar colorido apenas pra ficar bonito.

Quando se usa para o proposito de seleção, você certifica de que aquele elemento é selecionável, portanto, usa um link ou botão.

Como o iE6 entende apenas o pseudo-classe com link, é só usar um link para o elemento que irá usar para a seleção:

table.tabelaOpcoes{
    border:1px solid blue;
}
table.tabelaOpcoes td{
    border:1px solid green;
    width:50px; height:auto;

}
table.tabelaOpcoes td a{
    background:orange;
    color:green;
    height:auto;
    padding:10px;
    display:block;
    text-decoration:none;
}
table.tabelaOpcoes td a:hover{
    background:green;
    color:orange;
}
<table class="tabelaOpcoes">
    <tr>
        <td><a href="#">Célula</a></td>
        <td><a href="#">Célula</a></td>
        <td><a href="#">Célula</a></td>
    </tr>


    <tr>
        <td><a href="#">Célula</a></td>
        <td><a href="#">Célula</a></td>
        <td><a href="#">Célula</a></td>
    </tr>

    <tr>
        <td><a href="#">Célula</a></td>
        <td><a href="#">Célula</a></td>
        <td><a href="#">Célula</a></td>
    </tr>
</table>

  <br />

<table class="tabelaOpcoes">
    <tr>
        <td><a href="#">Célula</a></td>
        <td><a href="#">Célula</a></td>
        <td><a href="#">Célula</a></td>
    </tr>


    <tr>
        <td><a href="#">Célula</a></td>
        <td><a href="#">Célula</a></td>
        <td><a href="#">Célula</a></td>
    </tr>

    <tr>
        <td><a href="#">Célula</a></td>
        <td><a href="#">Célula</a></td>
        <td><a href="#">Célula</a></td>
    </tr>
</table>

A pseudo-classe "hover" faria a mudança de cor de fundo. Toda a tabela que tivesse a mesma classe teria o mesmo comportamento padrão.

Outra coisa, cuidado com o seu html. Seus td's contêm elementos de parágrafo sem fechamento de tag.

Também não é semanticamente correto colocar um parágrafo dentro de um td, se aquilo é um elemento de uma tabela não pode ser um parágrafo de um texto.

Beleza? Aquele abraço.

Link para o comentário
Compartilhar em outros sites
  • 0
Eder

Eder

Postado
  • Autor
Postado (editado)

Ola...Kakarotto. Obrigado pela resposta.

Carinha....seguinte...eu fiz o esqueminha...e funcionou perfeito....mas ele seleciona a célula e eu queria como no exemplo acima...selecionar a linha da tabela..independente do nr de colunas....como naquele exemplinho lá em cima...que funciona apenas em uma tabela...

você mencionou:

Agora, Éder, esse tipo de efeito é geralmente usado quando você pode selecionar uma opção. Não faz sentido você fazer o td ficar colorido apenas pra ficar bonito.

R: carinha...compreendo.... mas alem de ser mais bonitinho mesmo...rs...acho eu...facilita para usuario se achar na tabela..pois estou usando uma tabela de campeonato (jogos futebol) então fica legal....ele se cituar....na linha da tabela ..compreende.

Terias alguma idéia para fazer desta forma? algo que independente do nr de tabelas...no caso aplicaria na pagina inteira(tabelas)...ai facilitaria.

Carinha muito agradecido...independente da sua resposta já me ajudou muito pois aprendi algo mais... :)

Editado por Eder
Link para o comentário
Compartilhar em outros sites
  • 0
KaKarotto

KaKarotto

Postado
Postado

Ahhhh agora entendi o que quer fazer....iluminar os td´s da linha toda.

Saquei.

Ó eu fiz um script simples:

function classTables(classe, hover){
                 var tabelas=document.getElementsByTagName("table")
                     for(var x in tabelas)
                         if(tabelas[x].className==classe){
                          var tr=tabelas[x].getElementsByTagName("tr")
                              for(var y in tr){
                                   tr[y].onmouseover=function(){
                                   var td=this.getElementsByTagName("td")
                                       for(var z in td)
                                       td[z].className=hover
                                  }
                                   tr[y].onmouseout=function(){
                                    var td=this.getElementsByTagName("td")
                                        for(var z in td)
                                        td[z].className=""
                                   }
                              }


                         }
                 
                }
                window.onload=function(){classTables("tabelaOpcoes", "hover")}

Testa direitinho pra ver se funciona nos navegadores corretamente.

Na chamada da função classTables, você pode definir o primeiro argumento que é o nome da classe das suas tabelas e pode definir a classe que vai modificar as linhas ao passar o mouse por cima.

Beleza?

Aquele abraço.

Link para o comentário
Compartilhar em outros sites
  • 0
Eder

Eder

Postado
  • Autor
Postado

amigão...acho que não entendi...pois não funcionou....ou melhor...aonde configuro a cor?? :blush:

fiz assim:

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>X</title>
<meta name="author" content="ED">
<script language="JavaScript">
<!-- JavaScript
function classTables(classe, hover){
                 var tabelas=document.getElementsByTagName("table")
                     for(var x in tabelas)
                         if(tabelas[x].className==classe){
                          var tr=tabelas[x].getElementsByTagName("tr")
                              for(var y in tr){
                                   tr[y].onmouseover=function(){
                                   var td=this.getElementsByTagName("td")
                                       for(var z in td)
                                       td[z].className=hover
                                  }
                                   tr[y].onmouseout=function(){
                                    var td=this.getElementsByTagName("td")
                                        for(var z in td)
                                        td[z].className=""
                                   }
                              }


                         }
                 
                }
                window.onload=function(){classTables("tabelaOpcoes", "hover")}
// - JavaScript - -->
</script></head>

<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">

<table border class="classTables">
    <tr>
        <td width="320"><p>X</td>
        <td width="320"><p>X</td>
    </tr>
    <tr>
        <td width="320"><p>X</td>
        <td width="320"><p>X</td>
    </tr>
</table>
<table border class="classTables">
    <tr>
        <td width="320"><p>X</td>
        <td width="320"><p>X</td>
    </tr>
    <tr>
        <td width="320"><p>X</td>
        <td width="320"><p>X</td>
    </tr>
</table>
</body>

</html>

:blush:

Link para o comentário
Compartilhar em outros sites
  • 0
KaKarotto

KaKarotto

Postado
Postado

NÃAAAAAAAAAAAAAAO rsrs, Éder pow...

Seguinte, o primeiro parâmetro da função é o nome da classe que você definirá para as tabelas que terão o mesmo comportamento. Já o segundo é o nome da classe que você vai definir para os valores dos td da linha quando o mouse estiver por cima.

NOOOOOOOOOSSa não entendeu nada, nem eu....vou mostrar:

Quero fazer uma tabela que tenha o comportamento que você quer. Então eu escolho uma classe para ela e para as demais tabelas que terão o mesmo comportamento, sei lá, vou colocar o nomde da classe como Eder.

<table border class="Eder">
    <tr>
        <td width="320"><p>X</td>
        <td width="320"><p>X</td>
    </tr>
    <tr>
        <td width="320"><p>X</td>
        <td width="320"><p>X</td>
    </tr>
</table>
<table border class="Eder">
    <tr>
        <td width="320"><p>X</td>
        <td width="320"><p>X</td>
    </tr>
    <tr>
        <td width="320"><p>X</td>
        <td width="320"><p>X</td>
    </tr>
</table>
Como vão ser as cores dos td? Defino uma classe em Css para os td´s, sei lá, "MouseEmCima". 
table td.MouseEmCima{
background:green;
}
Agora eu chamo a função em javascript no window.onload passando o nome da classe das tabelas, e o nome da classe dos elementos td´s quando o mouse estiver por cima: 
window.onload=function(){classTables("Eder", "MouseEmCima")}

Tá vendo? Chamo a função classTables e passo o primeiro argumento "Eder" que é o nome da classe das tabelas que terão o mesmo comportamento. No segundo eu passo o nome da classe onde defini o comportamento dos td´s ao passar o mouse por cima.

Talvez não tenha explicado direito. O que o js faz é pegar todas as tabelas do documento que tenham a classe igual a "Eder" ( neste exemplo), pega todos os tr e coloca o evento onmouseover para quando esse tr esteja com mouse em cima, ele dará uma classe "MouseEmCima" (neste exemplo) para todos os todos pertencentes a ela.

Portanto, é o Css que define a formatação dos td´s e não o js.

Essa é uma boa prática, usar o js para executar e o Css para formatar.

Aquele abraço.

Link para o comentário
Compartilhar em outros sites
  • 0
Eder

Eder

Postado
  • Autor
Postado

carinha....mil perdões...sei que você vai ficar bravo comigo...mas não deu certo aqui não. :blush:

a sua explicação eu entendi...porem pelos códigos que você me passou o efeito não apareceu...

fiz assim baseado no que me passou:

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>X</title>
<meta name="author" content="ED">
<style type="text/css">
table td.MouseEmCima{
background:green;
}
</style>
<script language="JavaScript">
<!-- JavaScript window.onload=function(){classTables("Eder", "MouseEmCima")}
</script></head>

<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">

<table border class="Eder">
    <tr>
        <td width="320"><p>X</td>
        <td width="320"><p>X</td>
    </tr>
    <tr>
        <td width="320"><p>X</td>
        <td width="320"><p>X</td>
    </tr>
</table>
<table border class="Eder">
    <tr>
        <td width="320"><p>X</td>
        <td width="320"><p>X</td>
    </tr>
    <tr>
        <td width="320"><p>X</td>
        <td width="320"><p>X</td>
    </tr>
</table>
</body>

</html>

:wacko:

bom.....agora vou aguardar...sua bronca...caso for burrada minha....rs :blush: :)

Grato..

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,1k
    • Posts
      651,8k
×
×
  • Criar Novo...