Cambio de color dinamicamente

helena71 · #1 (**permalink**) 11/12/2012, 16:38

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<html>
 
<head>
 
<style type="text/css"> 
 
.contenedor {
width: 350px;
height: 100px;
margin-top: 5px; margin-right: 0px; margin-bottom: 3px; margin-left: 0px;
background: white;
border: 1px solid green;
}  
 
.contenedor:hover {
background-color: #FFFFDD;
} 
 
</style> 
 
<script type="text/javascript">
        
function maximizar_contenedor(caja)
{
 document.getElementById(caja).style.height="200px";
 document.getElementById(caja).style.backgroundColor='#FFFFDD';
}
 
function minimizar_contenedor(caja)
{
 document.getElementById(caja).style.height="100px";
 document.getElementById(caja).style.backgroundColor='#FFFFFF';
}
 
</script>
 
</head>
 
<body>
 
<div class="contenedor" id="caja1">
 <div><a id="boton1" href="javascript:maximizar_contenedor('caja1')">Maximizar</a></div>
 <div><a id="boton1" href="javascript:minimizar_contenedor('caja1')">Minimizar</a></div>
</div>
 
<div class="contenedor" id="caja2">
 <div><a id="boton1" href="javascript:maximizar_contenedor('caja2')">Maximizar</a></div>
 <div><a id="boton1" href="javascript:minimizar_contenedor('caja2')">Minimizar</a></div>
</div>
 
<div class="contenedor" id="caja2">
 <div><a id="boton1" href="javascript:maximizar_contenedor('caja3')">Maximizar</a></div>
 <div><a id="boton1" href="javascript:minimizar_contenedor('caja3')">Minimizar</a></div>
</div>
 
 
</body>
</html>

De antemano gracias por la ayuda.

axsys · #2 (**permalink**) 12/12/2012, 02:13

Lo mejor es trabajarlo todo con Javascript, remueve la regla css hover. y agrega este script despues del body.

Código Javascript:

Ver original(function(){
 
    var nodes = document.getElementsByTagName('body')[0].childNodes;
 
    for(node in nodes){
 
        if(nodes[node].className == 'contenedor'){
 
                nodes[node].onmouseover = function(){this.style.backgroundColor = '#FFFFDD'; };
            nodes[node].onmouseout = function(){ this.style.backgroundColor = '#FFFFFF'; };
        }
    }
 
})();

Obtiene todos los divs con la clase contenedor y les asigna una funcion a los eventos onmouseover y onmouse out. cambiando el color de fondo.

helena71 · #3 (**permalink**) 12/12/2012, 14:32

axsys, gracias por tu tiempo

Hice lo que me sugeriste:

Quite el hover y agregue la funcion en el body.

cuando maximizo cualquier contenedor cambia de color y cuando lo minimizo vuelve a su color original, pero cuando pasa el raton sobre los contenedores no pasa ningun efecto, como si lo tenia antes

axsys · #4 (**permalink**) 12/12/2012, 15:35

mm, que raro, a mi me funciona en firefox, chrome e IE, el codigo completo deberia de ser este:

Código HTML:

Ver original<html>
 
<head>
 
<style type="text/css"> 
 
.contenedor {
width: 350px;
height: 100px;
margin-top: 5px; margin-right: 0px; margin-bottom: 3px; margin-left: 0px;
background: white;
border: 1px solid green;
}  
 
</style> 
 
<script type="text/javascript">
        
function maximizar_contenedor(caja)
{
 document.getElementById(caja).style.height="200px";
 document.getElementById(caja).style.backgroundColor='#FFFFDD';
}
 
function minimizar_contenedor(caja)
{
 document.getElementById(caja).style.height="100px";
 document.getElementById(caja).style.backgroundColor='#FFFFFF';
}
 
 
 
</script>
 
</head>
 
<body>
 
<div class="contenedor" id="caja1">
 <div><a id="boton1" href="javascript:maximizar_contenedor('caja1')">Maximizar</a></div>
 <div><a id="boton1" href="javascript:minimizar_contenedor('caja1')">Minimizar</a></div>
</div>
 
<div class="contenedor" id="caja2">
 <div><a id="boton1" href="javascript:maximizar_contenedor('caja2')">Maximizar</a></div>
 <div><a id="boton1" href="javascript:minimizar_contenedor('caja2')">Minimizar</a></div>
</div>
 
<div class="contenedor" id="caja3">
 <div><a id="boton1" href="javascript:maximizar_contenedor('caja3')">Maximizar</a></div>
 <div><a id="boton1" href="javascript:minimizar_contenedor('caja3')">Minimizar</a></div>
 <div style="width:40px; height:40px; background: black;"></div>
</div>
 
 
</body>
 
<script type="text/javascript">
 
(function(){
 
    var nodes = document.getElementsByTagName('body')[0].childNodes;
 
    for(node in nodes){
 
        if(nodes[node].className == 'contenedor'){
 
            nodes[node].onmouseover = function(){ this.style.backgroundColor = '#FFFFDD'; };
            nodes[node].onmouseout = function(){ this.style.backgroundColor = '#FFFFFF'; };
        }
    }
 
})();
 
 
</script>
</html>

helena71 · #5 (**permalink**) 12/12/2012, 17:37

axsys, probe lo que me sugeriste

Con lo que me sugieres se soluciono el problema, pero me aparecio un problema que no tenia y que me funcionaba bien. Cuando maximizo una capa (cambia de color) y quito el mouse de dicha capa no mantiene el color, como si lo hacia antes. Le e hecho varios modificaciones despues de tu sugerencia pero no me funciona esta parte.

IsaBelM · #6 (**permalink**) 12/12/2012, 17:54

no añadas css en línea siempre que te sea posible. usa la propiedad className

Cita:

<html>

<head>

<style type="text/css">
.contenedor, .contenedormax {
width: 350px;
margin-top: 5px; margin-right: 0px; margin-bottom: 3px; margin-left: 0px;
background: white;
border: 1px solid green;
}

.contenedor {
background-color: #FFFFFF;
height: 100px;
}

.contenedormax {
background-color: #FFFFDD;
height: 200px;
}

.contenedor:hover {
background-color: #FFFFDD;
}

</style>

<script type="text/javascript">

function maximizar_contenedor(caja)
{
document.getElementById(caja).className = 'contenedormax';
}

function minimizar_contenedor(caja)
{
document.getElementById(caja).className = 'contenedor';
}

</script>

</head>

<body>

<div class="contenedor" id="caja1">
<div><a id="boton1" href="javascript:maximizar_contenedor('caja1')">Ma ximizar</a></div>
<div><a id="boton1" href="javascript:minimizar_contenedor('caja1')">Mi nimizar</a></div>
</div>

<div class="contenedor" id="caja2">
<div><a id="boton1" href="javascript:maximizar_contenedor('caja2')">Ma ximizar</a></div>
<div><a id="boton1" href="javascript:minimizar_contenedor('caja2')">Mi nimizar</a></div>
</div>

<div class="contenedor" id="caja2">
<div><a id="boton1" href="javascript:maximizar_contenedor('caja3')">Ma ximizar</a></div>
<div><a id="boton1" href="javascript:minimizar_contenedor('caja3')">Mi nimizar</a></div>
</div>

</body>
</html>

helena71 · #7 (**permalink**) 12/12/2012, 18:35

IsaBelM, probe tu sugerencia y me funciono perfecto como yo queria. Mil gracias

Quede con una duda. Para modificar una caracteristica de un elemento yo utilizo por ejemplo document.getElementById().style.height=, nunca antes habia visto o utilizado la instruccion document.getElementById(caja).className. No entendi como funciona.

Yo soy mas bien nueva en esto de js, sin embargo trabajo pegado de un manual http://www.librosweb.es/javascript/ y no he visto esta opcion className

Tienes un tutorial donde expliquen document.getElementById(caja).className, especialmente lo del .className

Nuevamente mil gracias

IsaBelM · #8 (**permalink**) 13/12/2012, 07:23

lee el final de este articulo