Cambiar el fondo de una celda al pasar el mouse por otra celda

Capimaster · #1 (**permalink**) 22/04/2008, 20:07

Bueno mi consulta es por que quiero hacer que cambie el fondo de una celda al pasar el mouse por otra celda.

O en su defecto que al pasar el mouse por una tabla cambie el fondo de otra tabla... esto es posible??

anteriormete he usado esto...

Código PHP:

  <table width="100%" align="center" cellpadding="0" cellspacing="2"  onmouseover="this.style.background = '#BBBBBB';"  onmouseout="this.style.background = '#FFFFFF';">

Capimaster · #2 (**permalink**) 22/04/2008, 20:56

Perdon como siempre se me pasaba...

les dejo el link
http://www.grupoirresistible.com/bio/

Quiero que al pasar el mouse sobre el nombre de cada integrante del grupo cambie la imagen del mono que aparece del lado izquiero...

juaniquillo · #3 (**permalink**) 23/04/2008, 08:04

¿Yo creo que esto que quieres es que funcione el javascript, no? Pásate mejor por el foro de javascript para que te puedan ayudar mejor.

JavierB · #4 (**permalink**) 23/04/2008, 08:52

Hola Capimaster

Prueba este ejemplo:

Código PHP:

  <html>
<head>
<script type="text/javascript">
function cambiar(cel,num) {
  document.getElementById(cel).style.background = (num==0) ? 'white' : 'red';
}
</script>
</head>
<body>
<table><tr>
<td onmouseover = "cambiar('celda1',1)" onmouseout = "cambiar('celda1',0)">----</td>
<td id="celda1">---</td>
</tr></table>
</body>
</html>

Movido al foro de JavaScript desde Css.

Saludos,

Capimaster · #5 (**permalink**) 23/04/2008, 11:25

Oye que bien si pude hacerlo jalar... parece que si me quedo bien solo me falta algo

document.getElementById(cel).style.background = (num==0) ? 'white' : 'red';

en lugar de color quiero poner imagenes como seria?

Capimaster · #6 (**permalink**) 23/04/2008, 11:29

Pensandolo mejor quisiera que fuera asi.. no se si es posible...

Código PHP:

  <script type="text/javascript"> 
function cambiar(cel,num) { 
  document.getElementById(cel).style.background = (num==0) ? 'white' : 'red'; 
} 
</script>

en vez de seleccionar color o solo la imagen podriamos decirle que busque en CSS

ejemplo este es el fondo que quiero que se vea al pasar el mouse

Código HTML:

.fondota { 
  background: white url("/images/sergio.jpg");
  background-repeat: no-repeat;
  background-position: center;
}

Capimaster · #7 (**permalink**) 23/04/2008, 12:11

Jajaja paresco loco preguntando y contestando yo solo, pero bueno... la buena es que ya pude hacer lo que queria... meter el comando no-repeat y align-center jiji

ahora mi consulta es la siguiente: quiero hacer esto con varias celdas estoy haciendo esto y si me funciona pero creo que estoy haciendo algo inecesario y con mucho codigo hay forma de simplificarlo??

Código PHP:

  <script type="text/javascript"> 
function cambiar(cel,num) { 
  document.getElementById(cel).style.background = (num==0) ? 'white' : 'url(http://www.grupoirresistible.com/images/sergio.jpg) no-repeat center'; 
} 
function cambiar2(cel,num) { 
  document.getElementById(cel).style.background = (num==0) ? 'white' : 'url(http://www.grupoirresistible.com/images/gera.jpg) no-repeat center'; 
} 
function cambiar3(cel,num) { 
  document.getElementById(cel).style.background = (num==0) ? 'white' : 'url(http://www.grupoirresistible.com/images/jose.jpg) no-repeat center'; 
} 
</script>

y a cada tabla le pongo su propiedad asi:

Código PHP:

  <td onmouseover = "cambiar6('celda1',1)" onmouseout = "cambiar6('celda1',0)">

JavierB · #8 (**permalink**) 23/04/2008, 14:18

Hola de nuevo.

Pues sí, creo que ese código se podría simplificar bastante:

Código PHP:

  <html>
<head>
<script type="text/javascript">
function cambiar(cel,num) {
  document.getElementById(cel).style.background = (num==0) ? 'white' : 'red';
}
</script>
</head>
<body>
<table><tr>
<td onmouseover = "cambiar('celda1',1)" onmouseout = "cambiar('celda1',0)">----</td>
<td id="celda1">---</td>
<td onmouseover = "cambiar('celda2',1)" onmouseout = "cambiar('celda2',0)">----</td>
<td id="celda2">---</td>
<td onmouseover = "cambiar('celda3',1)" onmouseout = "cambiar('celda3',0)">----</td>
<td id="celda3">---</td>
</tr></table>
</body>
</html>

Saludos,

silverfox14 · #9 (**permalink**) 02/02/2010, 18:07

HOlaa... es primera vez que escribo en un foro....

PERO QUISIERA QUE ME AYUDEN HACER LO MISMO CON LAS CELDAS PERO EN ESTE CASO QUIESIERA QUE AL PASAR EL MOUSE SOBRE UNA CELDA SE CAMBIE EL COLOR DEL FONDO Y QUE CADA CELDA TENGA DIFERENTE COLOR PARA QUE SE CAMBIE DE DIFERENTES COLORES DE FONDOS.................... PERO QUE SEA CON CSS....

GRACIAS..