Activar divs pasando el mouse

Legario · #1 (**permalink**) 16/10/2008, 11:11

Hola a todos, tengo un problema con los divs, lo que quiero hacer es que cuando pase el mouse por uno div sea visible otro.

Son 4 divs pequenos como pestañas y 4 divs anidados, cada div pequeño tiene un color diferente, lo que debe hacer es que cuando pase por ahi el mouse acitven los div anidados que son del mismo color que cada pestana, todo eso esta hecho, lo unico queno puedo hacer es que se repitan varias veces, solo me pertique que cuando pase por cada pestaña se active una vez y en un solo orden.

Les dejo el codigo asi me peuden ayudar:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<SCRIPT>
function mostrar(nombreCapa){
document.getElementById(nombreCapa).style.visibili ty="visible";
}
function ocultar(nombreCapa){
document.getElementById(nombreCapa).style.visibili ty="hidden";
}
</SCRIPT>
</head>

<body>

<div style="background-color:#FFFF00; position:absolute; height:56px; width: 330px; top:0px; left: 0px;" onmouseover="mostrar('capa1')"></div>

<div style="background-color:#FF0000; position:absolute; height:56px; width: 330px; left: 330px; top: 0px;" onmouseover="mostrar('capa2')"></div>

<div style="background-color:#0000FF; position:absolute; height:56px; width: 330px; left: 660px; top: 0px;" onmouseover="mostrar('capa3')"></div>

<div style="background-color:#00FF00; position:absolute; height:56px; width: 330px; left: 966px; top: 0px;" onmouseover="mostrar('capa4')"></div>

<div id="capa1" style="background-color:#FFFF00; position:absolute; width:1297px; height:546px; left: 0px; top: 56px; ;">
<div id="capa2" style="background-color:#FF0000; position:absolute; width:1297px; height:546px; left: -7px; top: 0px; visibility:hidden; visibilty:visible">
<div id="capa3" style="background-color:#0000FF; position:absolute; width:1297px; height:546px; left: 0px; top: 0px; visibility:hidden;">
<div id="capa4" style="background-color:#00FF00; position:absolute; width:1297px; height:546px; left: -1px; top: -1px; visibility:hidden;"></div>
</div>
</div>
</div>

</body>
</html>

Espero que puedan ayudarme

berthely · #2 (**permalink**) 16/10/2008, 18:23

Código HTML:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<SCRIPT>
function mostrar(color){
document.getElementById('capa1').style.backgroundColor= color;
}

</SCRIPT>
</head>

<body>

<div style="background-color:#FFFF00; position:absolute; height:56px; width: 330px; top:0px; left: 0px;" onmouseover="mostrar('#FFFF00')"></div> 

<div style="background-color:#FF0000; position:absolute; height:56px; width: 330px; left: 330px; top: 0px;" onmouseover="mostrar('#FF0000')"></div>

<div style="background-color:#0000FF; position:absolute; height:56px; width: 330px; left: 660px; top: 0px;" onmouseover="mostrar('#0000FF')"></div>

<div style="background-color:#00FF00; position:absolute; height:56px; width: 330px; left: 966px; top: 0px;" onmouseover="mostrar('#00FF00')"></div>



<div id="capa1" style="background-color:#FFFF00; position:absolute; width:1297px; height:546px; left: 0px; top: 56px; "></div>


</body>
</html>

Aqui tienes amigo, lo que pasaba era que la capa era superpuesta o sobrepuesta una delante de la otra y por lo tanto al estar en estado "mostrado" una encima de otra no se podia visualizar una vez que habia sido mostrada.

En fin lo que hice fue cambiar la propiedad backgrpundColor desde javascript.

Legario · #3 (**permalink**) 17/10/2008, 11:43

Muchas gracias por todo, un abrazo

digope · #4 (**permalink**) 18/10/2008, 09:55

Hola:

Se podría usar esto mismo para subtituir la IMAGEN de fondo.

Porque he probado a poner en css

Código:

capa1 {
           ...
           ...
          } 

capa1 a:over{
             background-image: ......
             }

pero solo me cambia el fondo de la parte en la que hay texto.
Sería para hacer un boton sencillo

saludos y gracias