Como cambiar el color de fondo de un tabla?

crcbad · #1 (**permalink**) 17/11/2005, 14:16

Buenas!! Una pregunta rapidilla que me preguntaba yo....

Hay alguna forma mediante estilos o HTML de que al pasar el ratón por una celda de una tabla, por ejemplo, tiene 8 celdas, que al pasar el raton se ponga un fondo esa celda y al quitar el ratón que se quede como inicialmente estaba?

Podria hacer 8 onmouseover por cada celda... pero me preguntaba si hay alguna forma mas sencilla por html o css.

Gracias ;)

carbalga · #2 (**permalink**) 17/11/2005, 14:43

Saludos

Mira esto se hace con DREAMWEAVER y con una extension que se llama: OBJECT COLOR CHANGER de PVII es gratis y funciona en Dreamweaver 4, MX, MX 2004 y 8.

Prueba el siguiente codigo:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/JavaScript">
<!--
function pviiW3Cbg(obj, pviiColor) { //v1.1 by Project VII
	obj.style.backgroundColor=pviiColor
}
//-->
</script>
</head>

<body>
<table width="150" height="30" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td align="center" valign="middle" bgcolor="#FF9933" onmouseover="pviiW3Cbg(this, '#FF0000')" onmouseout="pviiW3Cbg(this, '#FF9933')">1</td>
  </tr>
  <tr>
    <td align="center" valign="middle" bgcolor="#FF9933" onmouseover="pviiW3Cbg(this, '#FF0000')" onmouseout="pviiW3Cbg(this, '#FF9933')">2</td>
  </tr>
  <tr>
    <td align="center" valign="middle" bgcolor="#FF9933" onmouseover="pviiW3Cbg(this, '#FF0000')" onmouseout="pviiW3Cbg(this, '#FF9933')">3</td>
  </tr>
  <tr>
    <td align="center" valign="middle" bgcolor="#FF9933" onmouseover="pviiW3Cbg(this, '#FF0000')" onmouseout="pviiW3Cbg(this, '#FF9933')">4</td>
  </tr>
  <tr>
    <td align="center" valign="middle" bgcolor="#FF9933" onmouseover="pviiW3Cbg(this, '#FF0000')" onmouseout="pviiW3Cbg(this, '#FF9933')">5</td>
  </tr>
  <tr>
    <td align="center" valign="middle" bgcolor="#FF9933" onmouseover="pviiW3Cbg(this, '#FF0000')" onmouseout="pviiW3Cbg(this, '#FF9933')">6</td>
  </tr>
  <tr>
    <td align="center" valign="middle" bgcolor="#FF9933" onmouseover="pviiW3Cbg(this, '#FF0000')" onmouseout="pviiW3Cbg(this, '#FF9933')">7</td>
  </tr>
  <tr>
    <td align="center" valign="middle" bgcolor="#FF9933" onmouseover="pviiW3Cbg(this, '#FF0000')" onmouseout="pviiW3Cbg(this, '#FF9933')">8</td>
  </tr>
</table>
</body>
</html>

BUENA SUERTE

KarlanKas · #3 (**permalink**) 18/11/2005, 02:46

Esto funcionaría con cualquier navegador que no sea IE:

Código PHP:

  <html>
<head>
<title>Untitled</title>
<style>
table{
background:#ffcc66;
}
td{background:#ffffcc;
font:normal 10px/10px verdana;
padding:5px;}
td:hover{background:#ffff66;}
</style>
</head>

<body>

<table>
<tr><td>pepepe</td><td>pepepe</td><td>pepepe</td></tr>
<tr><td>pepepe</td><td>pepepe</td><td>pepepe</td></tr>
<tr><td>pepepe</td><td>pepepe</td><td>pepepe</td></tr>
<tr><td>pepepe</td><td>pepepe</td><td>pepepe</td></tr>
<tr><td>pepepe</td><td>pepepe</td><td>pepepe</td></tr>
<tr><td>pepepe</td><td>pepepe</td><td>pepepe</td></tr>

</table>

</body>
</html>

Está hecho con CSS.