Foros del Web » Creando para Internet » Diseño web »

Activar divs pasando el mouse

Estas en el tema de Activar divs pasando el mouse en el foro de Diseño web en Foros del Web. 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. ...
  #1 (permalink)  
Antiguo 16/10/2008, 12:11
 
Fecha de Ingreso: octubre-2008
Mensajes: 10
Antigüedad: 9 años, 2 meses
Puntos: 0
De acuerdo Activar divs pasando el mouse

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
  #2 (permalink)  
Antiguo 16/10/2008, 19:23
Avatar de berthely  
Fecha de Ingreso: junio-2008
Ubicación: VHSA Mexico
Mensajes: 453
Antigüedad: 9 años, 5 meses
Puntos: 9
Respuesta: Activar divs pasando el mouse

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.
  #3 (permalink)  
Antiguo 17/10/2008, 12:43
 
Fecha de Ingreso: octubre-2008
Mensajes: 10
Antigüedad: 9 años, 2 meses
Puntos: 0
Respuesta: Activar divs pasando el mouse

Muchas gracias por todo, un abrazo
  #4 (permalink)  
Antiguo 18/10/2008, 10:55
 
Fecha de Ingreso: junio-2006
Mensajes: 48
Antigüedad: 11 años, 5 meses
Puntos: 0
Respuesta: Activar divs pasando el mouse

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
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 12:27.