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


De antemano gracias por la ayuda.