cambiar color del texto al pasar por encima la tabla

sergi_climent · #1 (**permalink**) 06/09/2006, 04:22

Hola,
tengo el siguiente codigo:

Código PHP:

  echo "<tr  

    onmouseover=\"this.style.backgroundColor='#006666'; this.style.color='#FFFFFF'\"

    onmouseout=\"this.style.backgroundColor='#EAEAEA';this.style.color='#000000'\" 

    style=\"cursor:default; background-color:#EAEAEA; color='#000000'\"

  >";

lo q haces es iluminar la fila cuando se pasa por encima. lo q no me sale es q me cambie el color del texto...
q es lo q hago mal?

saludos y gracias!

ZiTAL · #2 (**permalink**) 06/09/2006, 08:30

Código HTML:

<html>
<head>
<script type="text/javascript">
function CambiaColor(esto)
 {
  esto.style.background="blue";
  var child=esto.getElementByTagName("td");
  child[0].style.color="red";
 }
</script>
</head>
<body>
<table>
 <tr onMouseOver="CambiaColor(this)"><td>Eoooooo</td></tr>
</table>
</body>
</html>

lo he echo de memoria es que me voy a la playa y no tengo tiempo!!!

sergi_climent · #3 (**permalink**) 06/09/2006, 10:44

lo probare mañana... q hoy no he podido porque he andado un poco liado.
antetodo gracias por tu rapida respuesta!
ahora la duda q me keda es si el codigo q he puesto arriba tendria q funcionar correctamente no?
o soy yo q empiezo a delirar?

saludos y gracias

JavierB · #4 (**permalink**) 06/09/2006, 10:52

Hola sergi_climent

El código que has puesto parece correcto. Ejecuta el PHP y mira el código fuente a ver que es lo que te genera. En caso de duda ponlo aquí para que volvamor a echarle un ojo.

Edito: acabo de probar el código PHP y funciona perfectamente. Cambia el color de fondo y el color de la fuente

Saludos,

sergi_climent · #5 (**permalink**) 06/09/2006, 11:00

Hola... si cargo la pagina sola me funciona y me cambia el color de fondo y el del texto... pero estoy usando ajax, y cargo el contenido en un div, puede ser q el formato del div impida cambiar el color de la letra del contenido de la tabla?

saludos y gracias

ZiTAL · #6 (**permalink**) 06/09/2006, 12:06

Bueno te he hecho una funcion, funciona ok:

Código HTML:

<html>
<head>
<script type="text/javascript">
function CambiaColor(esto,fondo,texto)
 {
    esto.style.background=fondo;
    esto.style.color=texto;
 }
</script>
</head>
<body>
<table>
<tr onMouseOver="CambiaColor(this,'#000000','#ffffff')" onMouseOut="CambiaColor(this,'#ffffff','#000000')"><td>eoeo</td></tr>
</table>
</body>
</html>

Asi puedes elegir tu los colores que quieras desde la llamada de la funcion ;)

Funciona en Firefox, Opera y Internet Explorer.

Suerte!!!

sergi_climent · #7 (**permalink**) 07/09/2006, 00:49

Hola Zital,
me pasa lo mismo q con el codigo q tengo yo, si lo cargo en una pagina parte me funciona correctamente, pero al usar ajax y insertar ese codgio dentro un div el cambio del color de la letra no me funciona, incluso he probado quitar el formato q tenia puesto en el div pero va a ser q no... os dejo mi codigo entero a ver si veis algo...

saludos y gracias

Código PHP:

  <?

$dat=date(Ymd);

$str_list = "aqui va una consulta muy larga";

$qry_list = mysql_query($str_list); 

$rc_list = mysql_num_rows($qry_list);

?>

<table width="100%"align="center" border="0">

<tr><td>&nbsp;</td></tr>

<tr><td align="center" class="titolverd">Maquinas en Garantia</td></tr>

<tr>

<td>

<table width="100%" cellpadding="0" cellspacing="2" >

<tr>

<td align="left" class="lletranegreta">Maquina</td>

<td align="left" class="lletranegreta">Seccion</td>

<td align="left" class="lletranegreta">Tipo Maquina</td>

<td align="left" class="lletranegreta">Fabricante</td>

<td align="left" class="lletranegreta">Modelo</td>

<td align="left" class="lletranegreta">Fecha Garantia</td>

</tr> 

<? if ($rc_list == 0)

echo "<tr><td colspan=7 class=listitem>No hay resultados.</td></tr>";

for($cr_list=1;$row_list=mysql_fetch_array($qry_list);$cr_list++){ 

echo "<tr 

        onMouseOver=\"canviacolor(this,'#006666','#FFFFFF')\" 

        onMouseOut=\"canviacolor(this,'#ffffff','#000000')\"

      >";

 
$num_maquina=$row_list[num_maq]."/".$row_list[tipus_maq];

$data_garantia=$row_list[data_garantia];

if ($data_garantia!=0){

    $data_garantia=giragiradata($data_garantia);

}

echo "<td align='left' width=7% class=\"lletra\">&nbsp;".$num_maquina."</td>";

echo "<td align='left' width=15% class=\"lletra\">&nbsp;".$row_list[seccio]."</td>";

echo "<td align='left' width=20% class=\"lletra\">&nbsp;".$row_list[tipus_maquina]."</td>";

echo "<td align='left' width=20% class=\"lletra\">&nbsp;".$row_list[fabricant]."</td>";

echo "<td align='left' width=20% class=\"lletra\">&nbsp;".$row_list[model]."</td>";

echo "<td align='left' width=15% class=\"lletra\">&nbsp;".$data_garantia."</td>";

echo "</tr>";

}

?>

</table></td>        

</tr>

</table>

ZiTAL · #8 (**permalink**) 07/09/2006, 01:02

Código HTML:

<?php
$dat=date(Ymd); 
$str_list = "aqui va una consulta muy larga"; 
$qry_list = mysql_query($str_list);  
$rc_list = mysql_num_rows($qry_list); 
?> 
<table width="100%"align="center" border="0"> 
<tr><td>&nbsp;</td></tr> 
<tr><td align="center" class="titolverd">Maquinas en Garantia</td></tr> 
<tr> 
<td> 
<table width="100%" cellpadding="0" cellspacing="2" > 
<tr> 
<td align="left" class="lletranegreta">Maquina</td> 
<td align="left" class="lletranegreta">Seccion</td> 
<td align="left" class="lletranegreta">Tipo Maquina</td> 
<td align="left" class="lletranegreta">Fabricante</td> 
<td align="left" class="lletranegreta">Modelo</td> 
<td align="left" class="lletranegreta">Fecha Garantia</td> 
</tr>  
<?php if ($rc_list == 0) 
?><tr><td colspan=7 class=listitem>No hay resultados.</td></tr><?php
for($cr_list=1;$row_list=mysql_fetch_array($qry_list);$cr_list++)
 {  
  ?><tr onMouseOver="canviacolor(this,'#006666','#FFFFFF')" onMouseOut="canviacolor(this,'#ffffff','#000000')">
  <?php 
    $num_maquina=$row_list[num_maq]."/".$row_list[tipus_maq]; 
    $data_garantia=$row_list[data_garantia]; 
    if ($data_garantia!=0)
     { 
      $data_garantia=giragiradata($data_garantia); 
     } 
     ?>
       <td align="left" width="7%" class="lletra">&nbsp;<?php echo $num_maquina; ?></td>
       <td align="left" width="15%" class="lletra">&nbsp;<?php echo $row_list[seccio]; ?></td>
       <td align="left" width="20%" class="lletra">&nbsp;<?php echo $row_list[tipus_maquina]; ?></td>
       <td align="left" width="20%" class="lletra">&nbsp;<?php echo $row_list[fabricant]; ?></td>
       <td align="left" width="20%" class="lletra">&nbsp;<?php echo $row_list[model]; ?></td>
       <td align="left" width="15%" class="lletra">&nbsp;<?php echo $data_garantia; ?></td>
       </tr>
     <?php
} 
?> 
</table></td>         
</tr> 
</table>

te he echo unos cambios aunque son minimos, no insertes etiquetas de HTML con PHP ya que te puede dar problemas con las comillas dobles comillas simples y demas, utiliza php lo mas minimo posible para que tu servidor haga los procesos que son unicamente necesarios.

Tampoco veo ninguna referencia de javascript, si puedes poner donde lo insertas.

suerte!!

sergi_climent · #9 (**permalink**) 07/09/2006, 01:10

Cita:

Iniciado por ZiTAL

[HTML]
Tampoco veo ninguna referencia de javascript, si puedes poner donde lo insertas.

como voy tirando de ajax, tengo la pagina principal donde incluyo varios archivos .js, y algun q otro css.
la funcion cambia color la tengo metida en un archivo .js

y el texto me sigue sin cambiar de color... jajaja! voy a desistir al final..

saludos

ZiTAL · #10 (**permalink**) 07/09/2006, 01:17

Código HTML:

...
<script type="text/javascript">
function CambiaColor(esto,fondo,texto)
 {
    esto.style.background=fondo;
    esto.style.color=texto;
 }
</script>
<tr onMouseOver="CambiaColor(this,'#006666','#FFFFFF')" onMouseOut="CambiaColor(this,'#ffffff','#000000')">
...

ponlo asi, dentro de la pagina, si asi tampoco funciona tendremos que averiguar haber como se hace eso dentro de un div.

Tambien puedes utilizar Capas en vez de tablas y hacerlo con CSS. No se si todo esto es viable pero no hay que rendirse, venga animo!!!

suerte!!!

PD: no incrustes html en php. Siempre cierra y abre etiquetas php

McBlink · #11 (**permalink**) 22/12/2006, 07:50

Buenas..
Miren.. yo creo que la manera mas sencilla seria usar la funcionOnMouseOver
aca te dejo la que hice y me decis si te anda..

<table border=1 cellpadding= cellspacing=0>
<tr>
<td onmouseover='this.style.background="#CCCCCC"'
onmouseout='this.style.background="#FFFFFF"'>
Home
</td>
</tr>
<tr>
<td onmouseover='this.style.background="#CCCCCC"'
onmouseout='this.style.background="#FFFFFF"'>
texto222222222222222222222
</td>
</tr>
<tr>
<td onmouseover='this.style.background="#CCCCCC"'
onmouseout='this.style.background="#FFFFFF"'>
Texto3
</td>
</tr>
</table>

ZiTAL · #12 (**permalink**) 22/12/2006, 08:16

si te fijas en mi post esa funcion se puede utilizar para cualquier tr no en el tuso se deberia de hacerlo en cada tr, con funciones es mucho mas facil, solo le pones los colores que quieres que tenga y listo.

velak · #13 (**permalink**) 05/03/2010, 14:41

el problema uqe tienes es que a lo ultimo no tenes que poner las barras / solo tienes que ponerlo seguido ' " que queden los tres puntitos