3 replies to this topic

[pdionline]

desculpa se estiver na area errada...
queria saber se tem como qndo passar o mouse em cima de uma célula mudar a cor do fundo, ou a imagem de fundo...
desde já Obrigado!

[Troyan]

..Pra mudar via CSS só é possível [seguramente] caso o elemento que vai receber a ação seja um link. Você pode "simular" o conteúdo de uma tabela ou mesmo preencher o conteúdo de uma tabela com um link, mas o evento de mouse no CSS [no Internet Explorer] só funciona pra links.

..Aí vai um exemplo:

<style type="text/css">
#teste a:link { display: block; width: 200px; height: 20px; background: black; color: chartreuse; }
#teste a:hover { background: chartreuse; color: black; }
</style>
<div id="teste">
  <a href="java script:;">Link 1</a>
  <a href="java script:;">Link 2</a>
  <a href="java script:;">Link 3</a>
  <a href="java script:;">Link 4</a>
</div>

..Se quiser fazer isso em células da tabela que não contenham link, use java script:

<script type="text/javascript">
function mC(tO,nC) { tO.oC=oC; tO.style.background=nC; tO.onmouseout=function() { vC(tO); } }
function vC(tO) { tO.style.background=tO.oC; tO.oC=''; }
</script>
<table border="1" cellpadding="0" cellspacing="0">
  <tr><td onmouseover="mC(this,'chartreuse','darkblue');">Texto 1</td></tr>
  <tr><td onmouseover="mC(this,'chartreuse','darkblue');">Texto 2</td></tr>
  <tr><td onmouseover="mC(this,'chartreuse','darkblue');">Texto 3</td></tr>
  <tr><td onmouseover="mC(this,'chartreuse','darkblue');">Texto 4</td></tr>
</table>

Ps.: Os dois valores entre aspas no onmouseover ('chartreuse' e 'darkblue') são as cores do background no estado original e no estado "over" (com o mouse sobre), respectivamente.

Pra mudar a imagem de fundo, pelo CSS, use background: url('arquivo.gif'); e, pelo, JavaScript, tO.style.backgroundImage='imagem.gif';.

....[]s

Edição feita por: Troyan, 21/07/2004, 01:18.

[pdionline]

Entendido amigo, vlw!!

[Lengrat]

Para você ter um efeito de mudança de cor de fundo de uma celula linkavel com CSS,

vocÊ faz o seguinte:

Defina os estilos

<style type="text/css">
<!--
#menu a {
 display: block;
 color: #ffffff;
 background: #003366;
 border-bottom: 1px solid #ffffff;
 padding: 2px 3px;
 text-decoration: none;
}
#menu a:hover {
 background: #CCCCCC;
 color:#000000
}
/* Corrige o problema do IE/Win da área clicável \*/
* html #menu a { height: 1%;}
/* Terminar Fix */
</style>

2- Em uma Única TD você coloca os seus links um do lado do outro, sem <br> nem nada, pois a quebra de linha da TD ja está definida no estilo acima.

<table width="200"  border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td bgcolor="#006699" class="classificados" id="menu"> Compra e Venda </td>
  </tr>
  <tr>
    <td id="menu"><a href="http://www.juliobogoricin.com/classificados/" target="_blank">Rio de Janeiro </a><a href="http://www.juliobogoricin.com/classificados-sp/" target="_blank">S&atilde;o Paulo </a><a href="http://www.juliobogoricin.com/classificados-bh/" target="_blank">Belo Horizonte </a></td>
  </tr>
  <tr>
    <td bgcolor="#00659C" class="classificados" id="menu"> Loca&ccedil;&atilde;o</td>
  </tr>
  <tr>
    <td id="menu"><a href="http://www.juliobogoricin.com/jbal/" target="_blank">Rio de Janeiro </a><a href="http://www.juliobogoricin.com/jbal-sp/" target="_blank">S&atilde;o Paulo </a><a href="http://www.juliobogoricin.com/jbal-bh/" target="_blank">Belo Horizonte </a></td>
  </tr>
  <tr>
    <td bgcolor="#00659C" class="classificados" id="menu">Im&oacute;veis Especiais </td>
  </tr>
  <tr>
    <td id="menu"><a href="http://www.juliobogoricin.com/imoveis_especiais/" target="_blank">S&iacute;tios, Fazendas e Outros </a> 
  </tr>
</table>

Abraços