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

Como Trocar fundo quando o mouse passar por cima?


iagouilian

Pergunta

3 respostass a esta questão

Posts Recomendados

  • 0

iagouofadiofew

Depende do que quer trocar de cor.

Olha um exemplo que eu fiz aqui rapidinho:

<table border="1" id="tabela1">
<tr>
<td>Célula</td><td>Célula</td><td>Célula</td>
</tr>

<tr>
<td>Célula</td><td>Célula</td><td>Célula</td>
</tr>


<tr>
<td>Célula</td><td>Célula</td><td>Célula</td>
</tr>

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

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

}
</script>

Nesse código, após o carregamento da página, ele vai pegar todos os td´s da tabela e adicionará os eventos mouseover e mouseout.

Aquele abraço

Link para o comentário
Compartilhar em outros sites

  • 0

Aproveitando o exemplo do KaKarotto.....duas formas diferentes e eficientes!!!

<table border="1" id="tabela1">
<tr>
<td style="background-image: url(imagens/image_01.gif)">Célula mouseover/out</td><td style="background-image: url(imagens/image_01.gif)">Célula mouseover/out</td><td style="background-image: url(imagens/image_01.gif)">Célula mouseover/out</td>
</tr>

</table>

<br />
<br />

<div class="imagem1">Célula class</div><div class="imagem1">Célula class</div><div class="imagem1">Célula class</div>
<script>
window.onload=function(){
var tabela=document.getElementById("tabela1")

for(var celula in tabela.getElementsByTagName("td")){
tabela.getElementsByTagName("td")[celula].onmouseover=function(){this.style.backgroundImage="url(imagens/image_02.gif)"}
tabela.getElementsByTagName("td")[celula].onmouseout=function(){this.style.backgroundImage="url(imagens/image_01.gif)"}
}

}
</script>
<style type="">
div.imagem1{
  background-image: url("imagens/image_01.gif");
  display: inline;
  border: 2px solid black;
}
div.imagem1:hover{
  background-image: url("imagens/image_02.gif");
  display: inline;
  border: 2px solid black;
}
</style>

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.



  • Estatísticas dos Fóruns

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