Como Trocar fundo quando o mouse passar por cima?

[iagouilian]

Numa tabela

como faço para o fundo do quadrado trocar e trocar novamente quando tirar o mouse de sima?

já temtei de varias formas mas numca da certo

como faço?

consegui fazer com q a img trocasse mas gostaria de colocar um texto sobre, por isso tem q ser o fundo

[KaKarotto]

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

[iagouilian]

Esqueci de avisar, pra trocar a img do fundo

vlw pela ajuda

[Gigabyte]

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>