Efecto onmouseover y onmouseout en fila de tabla

eK_Linux · #1 (**permalink**) 18/07/2008, 18:12

chavos necesito de su ayuda no soy muy experto en esto del css
y esta ves me enfrento al problema de como hacer el efecto onmouseover and mouseout para toda una fila de la tabla donde no importa en que celda de esa fila coloques el mouse se haga efecto corrido

asi: http://www.gosugamers.net/starcraft/replays

esta es mi fila:

Cita:

<table>
<tr>
<td align="center" bgcolor="$bg2" class="style1"><img src="http://www.forosdelweb.com/images/races/$ds[race1].jpg" title="$ds[race1]" width="28" height="14" border="0"> vs <img src="http://www.forosdelweb.com/images/races/$ds[race2].jpg" title="$ds[race2]" width="28" height="14" border="0"></td>
<td align="center" bgcolor="$bg1" class="style1">$date</td>
<td align="center" bgcolor="$bg2" class="style1">$game</td>
<td bgcolor="$bg1" align="left">$clan1</td>
<td bgcolor="$bg1" align="left">$clan2</td>
<td align="center" bgcolor="$bg2" class="style1">$ds[maps]</td>
<td align="center" bgcolor="$bg1" class="style1">$league</td>
<td align="center" bgcolor="$bg2" class="style1">$ds[player]</td>
<td align="center" bgcolor="$bg1" class="style1">$ratingpic</td>
<td bgcolor="$bg2" align="right"><span class="style1">($clicks)</span> <a href="index.php?site=demos&action=showdemo&demoID= $ds[demoID]">
<img src="http://www.forosdelweb.com/images/icons/download.gif" width="15" height="15" border="0" title="download"></a>
</td>
</tr>
</table>

es una tabla dinamica que se entiende segun lso reusltados de la base de datos igual ala que les puse en el ejemplo

PD: yo se como lograr que cada TD haga lo q quiero, pero el chiste no es ese, lo que deseo es que no importa en que celda de la fila pongas el mouse la fila completa(se ponga de otro color a todo lo largo horizontalmente)

gracias por su atencion agradeceria cualquier ayuda

Raulmmmm · #2 (**permalink**) 19/07/2008, 02:54

Puedes hacerlo con CSS, aunque no te funcionará en IE6 y anteriores. Te pongo también la solución Javascript.

Pon esto entre <head> y </head>:

Código HTML:

<style type="text/css">
tr:hover { background: blue; }
</style>

Y esta es la solución con Javascript (con comentarios condicionales para que sólo lo interprete IE6 y anteriores). Ponlo entre <head> y </head>:

Código HTML:

<!--[if lte IE 6]>
<script type="text/javascript">
function fuera(fila) {
fila.style.background='#fff';
} 
function encima(fila2) {
fila2.style.background='blue';
} 
</script>
<![endif]-->

Y luego le tienes que poner al tr los atributos onmouseover="encima(this)" onmouseout="fuera(this)".

Aquí un ejemplo:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Tabla coloreada al pasar por encima</title>
<style type="text/css">
tr:hover { background: blue; }
</style>
<!--[if lte IE 6]>
<script type="text/javascript">
function fuera(fila) {
fila.style.background='#fff';
} 
function encima(fila2) {
fila2.style.background='blue';
} 
</script>
<![endif]-->
</head>
<body>
<table>
<tr onmouseover="encima(this)" onmouseout="fuera(this)">
<td>fkjalfja</td><td>fjklajf</td>
</tr>
<tr onmouseover="encima(this)" onmouseout="fuera(this)">
<td>fkjalfja</td><td>fjklajf</td>
</tr>
</table>
</body>
</html>

Mikmoro · #3 (**permalink**) 19/07/2008, 05:22

Sencillo y claro, sí señor, Raulmmmm

Mikel.

Raulmmmm · #4 (**permalink**) 19/07/2008, 09:10

Muchas gracias Mikmoro. Esta vez me animé a hacer una mejor respuesta. Creo que gracias a ti, me voy a ir acostumbrando a esto.

eK_Linux · #5 (**permalink**) 19/07/2008, 12:12

woa q atencion tan rapida les agradesco mucho,probrare seguro funciona