cambiar imagen de fondo de una tabla con CSS ¿?

[cauly]

No se si esto va acá o en CSS, porque lo que quiero es que al pasar el mouse por una tabla se cambie la función CSS

Tengo esto:

Código PHP:

  <tr class="inputext"><td width="96%" nowrap height="15"> 
<a href="noticia-topico-26.php" class="submenu">Alianzas</a> 
</td></tr>  
   

y quiero que al pasar el mouse se cambio por esto:

Código PHP:

  <tr class="boton"><td width="96%" nowrap height="15"> 
<a href="noticia-topico-26.php" class="small">Alianzas</a> 
</td> 
</tr>  
   

El efecto (la función CSS) de "inputext" es una imagen, con esa funcion hago que haya una imagen de fondo en la tabla (repitiendose) y el class submenu hace que el link tenga un formato. Lo que quiero es que al pasar el mouse por encima de la tabla, el fondo cambie (el class sea en lugar del "inputext", sea "boton" y que el estilo del enlace en lugar de ser con el class "submenu", sea "small".

¿se puede hacer esto?

[JavierB]

Hola, cauly.

Prueba con esto:

Código PHP:

  <tr class="inputext" id="fila" onmouseover="cambiar()"> 
<td width="96%" nowrap height="15"> 
<a href="noticia-topico-26.php" id="enla" class="submenu">Alianzas</a> 
</td></tr> 
 
function cambiar() { 
   document.getElementById('fila').className='boton'; 
   document.getElementById('enla').className='small'; 
}  
   

Saludos,

[cauly]

(chas gracias por contestar)

Puse esto:

Código PHP:

  <script language="JavaScript"> 
function cambiar() { 
 
   document.getElementById('fila').className='boton'; 
 
   document.getElementById('enla').className='small'; 
 
} 
</script> 
<tr class="inputext" id="fila" onmouseover="cambiar()"> 
 
<td width="96%" nowrap height="15"> 
 
<a href="noticia-topico-26.php" id="enla" class="submenu">Alianzas</a> 
 
</td></tr>  
  

y sale la tabla sin ningún fondo y el link con el estilo del class submenu, y no se cambia nada, queda siempre asi

[cauly]

Perdón SI funciona, lo que todavía no pude hacer es que al sacar el mouse vuelva al estado original, tendria que poner una funcion onmouseout??

[cauly]

Ya puse para que vuelva al estilo original, pero tengo un problema y es que solo cambia la primer celda, el resto no la cambia y cuando pongo el mouse en cualqueir parte de la table se cambia la primera celda

El código es este:

Código PHP:

  <script language="JavaScript"> 
function cambiar() { 
 
   document.getElementById('fila').className='boton'; 
 
   document.getElementById('enla').className='small'; 
 
} 
function volver() { 
 
   document.getElementById('fila').className='inputext'; 
 
   document.getElementById('enla').className='submenu'; 
 
} 
</script> 
 
<table width="100%" border="0" cellspacing="0" cellpadding="0"> 
<tr class="inputext" id="fila" onmouseover="cambiar()" onmouseout="volver()"> 
<td width="96%" nowrap height="15"> 
<a href="noticia-topico-26.php" id="enla" id="enla" class="submenu">Alianzas</a> 
</td></tr> 
 
<tr class="inputext" id="fila" onmouseover="cambiar()"><td width="96%" nowrap height="15"> 
<a href="noticia-topico-27.php" id="enla" class="submenu">Becas</a> 
</td> 
</tr> 
</table>  
  

Ahí puse solo 2 celdas, pero tiene algunas más (son todas iguales).

[cauly]

en ese codigo que puse ahi falta agregar el mouseout de la segunda celda, ya lo agregué, pero igual el efecto solo se ve con la primera celda

[JavierB]

Hola de nuevo.

Si no te he entendido mal lo que quieres es que al poner el ratón encima de una fila, se cambie la imágen de las dos filas si es así necesitas algo como esto:

Código PHP:

  function cambiar() { 
    elem=document.getElementsByName('fila'); 
    for(i=0;i<elem.length;i++) 
          elem[i].className='boton'; 
...  
   

Saludos,

[cauly]

No, lo que quiero es que se cambie cada fila, mirá acá subí el ejemplo para que veas como queda, fijate que ponga el mouse donde fuere lo único que se cambia es la primera fila, yo quiero que si lo`pongo en la fila 1 cambie la 1, si lo pongo sobre la 4 cambie la 4 etc.
acá subí el ejemplo:
http://www.publicasonline.com/rrpp/a.html


Saludos

[JavierB]

Hola, cauly.

En primer lugar pedirte disculpas, porque he entendido mal el mensaje desde el principio y he liado el tema más de lo necesario. Ahora intentaré explicarme mejor:

Pon las filas así:

Código PHP:

  <tr class="inputext" onmouseover="this.className='boton'" onmouseout="this.clasName='inputext'"><td width="96%" nowrap height="15"> 
<a href="noticia-topico-26.php">Alianzas</a> 
</td></tr>  
   

Y las hojas de estilo así:

Código:

.boton {  background-image: url(../images/spacer10.jpg); background-repeat: repeat}
.inputext {  background-image: url(../images/inputext.gif); background-repeat: repeat; color:#ffffff}

.boton a {  BACKGROUND: none; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; color: #000000}
.inputext a {  BACKGROUND: none; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; font-weight: bold;  font-style: normal; color: #FFFFFF; text-decoration: none; vertical-align: middle}

De esta forma, si no la he vuelto a pifiar, se cambiarán al mismo tiempo el fondo de la fila y los enlaces.

Saludos,

[cauly]

Perfectooooooooooooooooo

UN MILLÓN DE GRACIAS

[cauly]

tengo un problemita, pero no se bien a que se debe, funciona perfecto, solo que el link queda del 2do color (el negro) cuando pongo el mouse sobre este y luego lo saco mirá acá http://www.cauly.host.sk/rrpp/index.php
eso es un bloque en phpnuke, pero si lo ves acá http://www.publicasonline.com/rrpp/a.html
se ve bien, o sea vuelve también el color del link a su estado original.
Pero si pongo el mouse la fila sin tocar el link, éste cambia de color y luego vuelve al color original.

[JavierB]

Hola de nuevo.

Me alegro de que casi te haya funcionado. Lo que no se es porque en un sitio marcha bien y en el otro no. Revisa las hojas de estilo a ver si tienes alguna definición que no esté como es debido.

Suerte. Saludos,

[cauly]

Listoooooooooooooooooo, ya encontré lo que era

MUCHAS GRACIAAAAAAAAAASSSSSSSSS