mostrar ocultar capas

palidowsky · #1 (**permalink**) 29/06/2005, 04:45

Hola encontré este código en los faqs nº 57
-----------------------------------------------
<html>
<head>
<title>Untitled</title>
<script>
var vista = null;
function ver(ide) {
obj = document.getElementById(ide);
obj.style.display = 'block';
if (vista!=null && vista!=obj)
vista.style.display = 'none';
vista = obj;
}
</script>
</head>
<body>
<a href="#" onMouseOver="ver('capa1'); return false" >Capa 1</a>
<a href="#" onMouseOver="ver('capa2'); return false">Capa 2</a>
<div id="capa1" style="display:none">Capa 1</div>
<div id="capa2" style="display:none">Capa 2</div>
</body>
</html>
------------------------------------------------------------------

El problema es que no se como hacer que con onMouseOut la capa desaparexca, es decir que no se vea.

KarlanKas · #2 (**permalink**) 29/06/2005, 05:06

Prueba a usar esto:

Código PHP:

  <html> 
<head> 
<title>Untitled</title> 
<script> 
function ver(ide,visible) { 
obj = document.getElementById(ide); 
obj.style.display = (visible)?'block':'none'; 
} 
</script> 
</head> 
<body> 
<a href="#" onMouseOut="ver('capa1',false); return false" onMouseOver="ver('capa1',true); return false" >Capa 1</a> 
<a href="#" onMouseOut="ver('capa2',false); return false" onMouseOver="ver('capa2',true); return false">Capa 2</a> 
<div id="capa1" style="display:none">Capa 1</div> 
<div id="capa2" style="display:none">Capa 2</div> 
</body> 
</html>

Un saludo!

LOD_Fredy · #3 (**permalink**) 10/10/2010, 13:44

gracias karlankas, andaba buscando como hacer esto de forma sencilla y pudiendolo modificar sin problemas para crear menús y submenús (aun estoy en ello, espero no arruinar tu script).

Esto es lo que llevo

Código HTML:

<html>
<head>
<title>Untitled</title>
<script>
function ver(ide,visible) {
obj = document.getElementById(ide);
obj.style.display = (visible)?'block':'none';
}
</script>
</head>
<body>
<!--Menu principal-->
<div id="menup">
	<table>
		<tr><td class="mpc"><a href="#" onMouseOut="ver('spc',false); return false" onMouseOver="ver('spc',true); return false" >Capa 1</a></td>
		<td class="mjuegos"><a href="#" onMouseOut="ver('sjuegos',false); return false" onMouseOver="ver('sjuegos',true); return false">Capa 2</a></td></tr>
	</table>
</div>
<!------------------->

<!--SubMenus-->
<div id="spc" onMouseOut="ver('spc',false); return false" onMouseOver="ver('spc',true); return false"  style="display:none">
	<table>
		<tr><td><a href="#">Capa 1</a></td></tr>
		<tr><td><a href="#">Capa 2</a></td></tr>
	</table>
</div>

<div id="sjuegos" onMouseOut="ver('sjuegos',false); return false" onMouseOver="ver('sjuegos',true); return false" style="display:none;position:absolute; left:58px; top:30px;">
	<table>
		<tr><td><a href="#">Capa 1</a></td></tr>
		<tr><td><a href="#">Capa 2</a></td></tr>
	</table>
</div>
<!------------------->
</body>
</html>

Aun me faltan los estilos pero es nada mas para darle diseño, lo funcional creo que si esta quedando.

Tambien vere como hacer para que cada celda de la tabla cambie de color (o cambie la imagen de fondo que seria un "boton" creado en photoshop) cuando paso el cursor sobre ella. Cuando tenga un menu mas completado si quieren lo pongo (esperando y no les sea muy confuso).

He de decir que este menu aun no lo usare, lo tendre como codigo de respaldo para cuando lo necesite (osea cuando mi sitio tenga mas contenido diferente para mostrar).

caricatos · #4 (**permalink**) 10/10/2010, 15:04

Tema cerrado por viejo. Siempre puede referenciarse