• 0
Sign in to follow this  
iagouilian

Como Trocar fundo quando o mouse passar por cima?

Question

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

Share this post


Link to post
Share on other sites

3 answers to this question

Recommended Posts

  • 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

Share this post


Link to post
Share on other 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>

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this