Cambio de color en Tablas cuando pasa con el mouse

syntex · #1 (**permalink**) 18/05/2003, 09:47

Se que para cambiar de color de una tabla pasando con el ratón sería

<table>
<tr>
<td onmouseover="this.style.background='#F2EEE1'" onmouseout="this.style.background='f5f5f5'"> 
</td>
</tr>
</table>

Pero como podría hacer para que cuando se cambie de color una tabla pero las otras me las cambie con la tabla primera pasando con el ratón ?

<Table>
<tr>
<td td onmouseover="this.style.background='#F2EEE1'" onmouseout="this.style.background='f5f5f5'"> 
</td>
<td> Cambiar el color cuando pase el raton de la primera tabla
</tr>
</table>

JavierB · #2 (**permalink**) 18/05/2003, 10:17

Hola, syntex.

Si te he entendido bien

creo que quieres cambiar el color de una celda cuando el ratón pase por otra celda. En ese caso sería algo así:

<table>
<tr>
<td id="tab"> </td>
</tr>
<tr>
<td onMouseOver="tab.style.background='#F2EEE1'" onMouseOut="tab.style.background='f5f5f5'"> </td>
</tr>
</table>

Si no es eso, vuelve a preguntar. Saludos,

syntex · #3 (**permalink**) 18/05/2003, 11:16

Hola veo que no me funciona

Te comento

quiero que me marque 4 tablas de color cuando marque solo una, ya que la incluiria esa tambien.

Veo que me da fallos cuando doy el nombre a dos o más tablas, y ya que la del
<td onMouseOver="tab.style.background='#F2EEE1'" onMouseOut="tab.style.background='f5f5f5'"> dddddd</td>

no me cambia de color

Saludos

tunait · #4 (**permalink**) 18/05/2003, 11:55

Nos vamos a javascript

syntex · #5 (**permalink**) 18/05/2003, 11:57

Ahora mismi lo paso a javascript

Saludos

tunait · #6 (**permalink**) 18/05/2003, 11:59

nooo que yá estamos en javascript!!

syntex · #7 (**permalink**) 18/05/2003, 11:59

Veo que ya estaba incluido gracias moderadora

Podeís ayudarme ?

JavierB · #8 (**permalink**) 18/05/2003, 13:07

Hola de nuevo.

A ver si esto se acerca más a lo que necesitas:

Código PHP:

  <html> 
<head> 
<script> 
function sobre() { 
    for (i=1;i<5;i++) 
    document.getElementById('tab'+i).style.background='#F2EEEE'; 
} 
function fuera() { 
    for (i=1;i<5;i++) 
    document.getElementById('tab'+i).style.background='#5f5f5f'; 
} 
</script> 
</head> 
 
<body> 
<table width="75%" border="1"> 
  <tr> 
    <td id="tab1" onMouseOver="sobre()" onMouseOut="fuera()">uno</td> 
  </tr> 
  <tr> 
    <td id="tab2">dos</td> 
  </tr> 
  <tr> 
    <td id="tab3">tres</td> 
  </tr> 
  <tr> 
    <td id="tab4">cuatro</td> 
  </tr> 
</table> 
</body> 
</html>

Saludos,

P.D. No se si será un error al poner el mensaje, pero en los colores que has puesto de ejemplo falta un dígito en cada uno.

syntex · #9 (**permalink**) 18/05/2003, 15:15

Saludos

Mira lo e probado y funciona correctamente para una tabla ya que marcando la otra tabla me marca la misma de la primera

No se si me has podido entender.

<table width="75%" border="1">
<tr>
<td id="tab1" onMouseOver="sobre()" onMouseOut="fuera()">uno</td>
<td id="tab2">dos</td>
<td id="tab3">tres</td>
<td id="tab4">cuatro</td> </tr>
<tr>
<td id="tab5" onMouseOver="sobre()" onMouseOut="fuera()">uno</td>
<td id="tab6">dos</td>
<td id="tab7">tres</td>
<td id="tab8">cuatro</td> </tr>
</table>

Saludos

Lo e intentado asín

Seria correcto?

<script>
function sobre() {
for (i=1;i<5;i++)
document.getElementById('tab'+i).style.background= '#F2EEEE';
}
function fuera() {
for (i=1;i<5;i++)
document.getElementById('tab'+i).style.background= '#ffffff';
}
function sobre1() {
for (i=1;i<5;i++)
document.getElementById('taba'+i).style.background ='#F2EEEE';
}
function fuera1() {
for (i=1;i<5;i++)
document.getElementById('taba'+i).style.background ='#ffffff';
}
</script>
<table width="75%" border="1">
<TR>
<td id="tab1" onMouseOver="sobre()" onMouseOut="fuera()">uno</td>
<td id="tab2" onMouseOver="sobre()" onMouseOut="fuera()">dos</td>
<td id="tab3" onMouseOver="sobre()" onMouseOut="fuera()">tres</td>
<td id="tab4" onMouseOver="sobre()" onMouseOut="fuera()">cuatro</td>
<TR>
<td id="taba1" onMouseOver="sobre1()" onMouseOut="fuera1()">uno</td>
<td id="taba2" onMouseOver="sobre1()" onMouseOut="fuera1()">dos</td>
<td id="taba3" onMouseOver="sobre1()" onMouseOut="fuera1()">tres</td>
<td id="taba4" onMouseOver="sobre1()" onMouseOut="fuera1()">cuatro</td>
</tr>
</table>

Saludos