Foros del Web » Creando para Internet » CSS »

Efecto onmouseover y onmouseout en fila de tabla

Estas en el tema de Efecto onmouseover y onmouseout en fila de tabla en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 18/07/2008, 19:12
 
Fecha de Ingreso: febrero-2007
Mensajes: 112
Antigüedad: 10 años, 10 meses
Puntos: 0
Efecto onmouseover y onmouseout en fila de tabla

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

Última edición por eK_Linux; 18/07/2008 a las 19:19
  #2 (permalink)  
Antiguo 19/07/2008, 03:54
Avatar de Raulmmmm  
Fecha de Ingreso: marzo-2007
Ubicación: En otro lugar que tú
Mensajes: 1.549
Antigüedad: 10 años, 8 meses
Puntos: 36
Respuesta: Efecto onmouseover y onmouseout en fila de tabla

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> 
  #3 (permalink)  
Antiguo 19/07/2008, 06:22
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Efecto onmouseover y onmouseout en fila de tabla

Sencillo y claro, sí señor, Raulmmmm

Mikel.
  #4 (permalink)  
Antiguo 19/07/2008, 10:10
Avatar de Raulmmmm  
Fecha de Ingreso: marzo-2007
Ubicación: En otro lugar que tú
Mensajes: 1.549
Antigüedad: 10 años, 8 meses
Puntos: 36
Respuesta: Efecto onmouseover y onmouseout en fila de tabla

Muchas gracias Mikmoro. Esta vez me animé a hacer una mejor respuesta. Creo que gracias a ti, me voy a ir acostumbrando a esto.
  #5 (permalink)  
Antiguo 19/07/2008, 13:12
 
Fecha de Ingreso: febrero-2007
Mensajes: 112
Antigüedad: 10 años, 10 meses
Puntos: 0
Respuesta: Efecto onmouseover y onmouseout en fila de tabla

woa q atencion tan rapida les agradesco mucho,probrare seguro funciona
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 01:37.