Tema: Cambio de color dinamicamente
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 11/12/2012, 16:38
helena71
 
Fecha de Ingreso: julio-2012
Ubicación: Colombia
Mensajes: 53
Antigüedad: 12 años, 7 meses
Puntos: 0
Cambio de color dinamicamente
Hola a todos, les agradezco cualquier colaboracion o sugerencia que me puedan ofrecer.

Estoy haciendo un pequeño script en PHP con algo de Javascript para que sea mas dinamico.

El script se compone de 3 capas (contenedores), las cuales cambian de color (de blanco a amarillo) cuando el raton pasa sobre ellas.

Cada capa (contenedor) tiene dos botones (funciones javascript), una para maximizar la capa (contenedor) y otro para minimizar la capa (contenedor).

Cuando la capa (contenedor) se maximiza cambia de color (de blanco a amarillo).
Cuando la capa (contenedor) se minimiza vuelve a su color original (de amarillo a blanco).

El problema que tengo, es que cuando minimizo capa (contenedor) y vuelvo a pasar sobre la capa el raton (contenedor), el efecto de cambiar de color no tiene ningun efecto.


El codigo es este:

Código HTML: 
Ver original
  1. <html>
  2.  
  3. <head>
  4.  
  5. <style type="text/css"> 
  6.  
  7. .contenedor {
  8. width: 350px;
  9. height: 100px;
  10. margin-top: 5px; margin-right: 0px; margin-bottom: 3px; margin-left: 0px;
  11. background: white;
  12. border: 1px solid green;
  13. }  
  14.  
  15. .contenedor:hover {
  16. background-color: #FFFFDD;
  17. } 
  18.  
  19. </style> 
  20.  
  21. <script type="text/javascript">
  22.         
  23. function maximizar_contenedor(caja)
  24. {
  25.  document.getElementById(caja).style.height="200px";
  26.  document.getElementById(caja).style.backgroundColor='#FFFFDD';
  27. }
  28.  
  29. function minimizar_contenedor(caja)
  30. {
  31.  document.getElementById(caja).style.height="100px";
  32.  document.getElementById(caja).style.backgroundColor='#FFFFFF';
  33. }
  34.  
  35. </script>
  36.  
  37. </head>
  38.  
  39. <body>
  40.  
  41. <div class="contenedor" id="caja1">
  42.  <div><a id="boton1" href="javascript:maximizar_contenedor('caja1')">Maximizar</a></div>
  43.  <div><a id="boton1" href="javascript:minimizar_contenedor('caja1')">Minimizar</a></div>
  44. </div>
  45.  
  46. <div class="contenedor" id="caja2">
  47.  <div><a id="boton1" href="javascript:maximizar_contenedor('caja2')">Maximizar</a></div>
  48.  <div><a id="boton1" href="javascript:minimizar_contenedor('caja2')">Minimizar</a></div>
  49. </div>
  50.  
  51. <div class="contenedor" id="caja2">
  52.  <div><a id="boton1" href="javascript:maximizar_contenedor('caja3')">Maximizar</a></div>
  53.  <div><a id="boton1" href="javascript:minimizar_contenedor('caja3')">Minimizar</a></div>
  54. </div>
  55.  
  56.  
  57. </body>
  58. </html>


De antemano gracias por la ayuda.