Usar onMouseover para ocultar/mostrar capa

cloudsagara · #1 (**permalink**) 15/06/2011, 04:44

Hola! estoy empezando a programar por mi cuenta en javascript y quiero mostrar en mi web una especie de menú a la izquierda y que al pasar el raton por encima de cada capa del menú me aparezca la capa ke muestre esa opcion del menú justo en el centro de la web.

El problema llega porque no sé exactamente como hacerlo, he creado una capa para cada elemento del menú pero al intentar añadirle el evento onMouseover a dicha capa para que aparezca la capa central no me hace nada la web, no se si será porque no le paso la capa que quiero mostrar a la funcion del evento , ya que no se exactamente cómo acceder al objeto que guarda la informacion de cada capa. bueno les dejo el codigo de las capas, el de las 2 funciones y el del código html.

<style type="text/css">
#mostrardir
{
position: absolute;
top:62.5%;
left:22%;
height:19%;
width:17%;
color:#000;
font-weight: bold;
background-color: #999;
background-image: url(images/direccion2.JPG);
}

#direccion
{
position: absolute;
top:55%;
left:4%;
height:5%;
width:8%;
color:#000;
font-weight: bold;

}
</style></head>

<body>

<script type="text/javascript">

function mostrarcapa(capilla)
{
document.getElementById(capilla).style.visibility= 'visible';

}

function ocultarcapa(capilla)
{
document.getElementById(capilla).style.visibility= 'hidden';

}
</script>

<div id=uno></div>
<div id=fachada></div>
<div id="direccion" onMouseover="mostrarcapa(mostrardir);" onMouseout="ocultarcapa(mostrardir);" > Dirección</div>

utilizando en el onmouseover this.style.visibility ..... sí que me oculta y me muestra la capa direccion, pero no es la "direccion" la que quiero mostrar, sino que se pase el raton sobre la capa "direccion" y se muestre la capa "mostrardir".

Otra preguntilla... por algunos lugares tb he visto llamar a las funciones y hacer que devuelvan true o false en la misma declaracion del div id, ¿para qué se hace eso? que sentido tiene el true o el false ahí?

espero que podais ayudarme foreros! y gracias de antemano.

Blashak · #2 (**permalink**) 15/06/2011, 05:11

Buenas,

Te dejo un ejemplo.

Código CSS:

Ver original#prueba1
{
background:red;
width:100px;
height:100px;
}
#prueba2
{
background:blue;
width:100px;
height:100px;
}
 
#prueba3
{
background:green;
position:absolute;
width:100px;
height:100px;
top:50%;
left:50%;
margin-top:-50px;
margin-left:-50px;
display:none;
}

Código Javascript:

Ver originalfunction visible(){
 
    obj = document.getElementById("prueba3");
    obj.style.display = "block";
 
}
 
function ocultar(){
    obj = document.getElementById("prueba3");
    obj.style.display = "none";
 
}

Código HTML:

Ver original<div id="prueba1" onmouseover="visible()"  onmouseout="ocultar()">opcion1</div>
<div id="prueba2" onmouseover="visible();" onmouseout="ocultar()" >opcion2</div>
<div id="prueba3">centro</div>

saludos

cloudsagara · #3 (**permalink**) 15/06/2011, 16:35

Primero de todo gracias por contestar tan rapido Bashak, he probado tu ejemplo y funciona perfectamente y he hecho la modificacion pertinente en mi código quedando de ésta forma:

Código HTML:

<script type="text/javascript">
function mostrarcapa(capilla)
{
	obj = document.getElementById(capilla);
    obj.style.display = "block";

}

function ocultarcapa(capilla)
{
	obj = document.getElementById(capilla);
    obj.style.display = "none";
	
}
</script>




<div id=uno></div>
<div id=fachada></div>
<div id="direccion"  onMouseover="mostrarcapa('mostrardir')" onMouseout="ocultarcapa('mostrardir)"> Dirección</div>

<div id=mostrardir></div>

El evento onMouseover de mostrar la capa funciona a la perfección y muestra dicha capa, el caso es que el onmouseout no la hace desaparecer, quizás haya fallado en algo la sintaxys que he puesto? y otra preguntilla es: al ver el código anterior con el ejemplo de antes:

Código HTML:

<div id="prueba1" onmouseover="visible()"  onmouseout="ocultar()">opcion1</div>
<div id="prueba2" onmouseover="visible();" onmouseout="ocultar()" >opcion2</div>

vi que entre los eventos de la capa prueba1 no hay ";" y en los de prueba2 sí que está, se hace por algo en especial? o simplemente un descuido y yasta?

Gracias de antemano, un saludo !

Jintan · #4 (**permalink**) 14/07/2015, 21:50

Hola, Me sirvió mucho el código que hiciste,

y si tienes un pequeño error.

y es que en el:

<div id="direccion" onMouseover="mostrarcapa('mostrardir')" onMouseout="ocultarcapa('mostrardir)"> Dirección</div>

te falta
onMouseout="ocultarcapa('mostrardir*'*)"

o sea lo que puse entre los **