Fecha: 20/01/2003
menu dhtml layers divs
codigo javascript que nos enseña como mostrar y ocultar capas ( layers/ divs ) en los documentos html.
Código Javascript
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>menu layers divs</title>
<script type="text/javascript">
<!--
// Code Original de Dan Steinman
ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false
//-->
</SCRIPT>
<script type="text/javascript">
<!--
/* Estas funciones se encargan de mostrar
y ocultar capas.
por Gabriel Rodríguez.
*/
function MostrarCapa(capa){
if(document.layers)document.layers[capa].visibility='show' // Si utilizamos NS
if(document.all)document.all(capa).style.visibility='visible' // Si utilizamos IE
}
function OcultarCapa(capa){
if(document.layers)document.layers[capa].visibility='hide' // Si utilizamos NS
if(document.all)document.all(capa).style.visibility='hidden' // Si utilizamos IE
}
-->
</script>
</head>
<body BGCOLOR="#FFFFFF" TEXT="#000000">
<script>
<!--
/* Chequeamos la Versión del Browser que posee el usuario. Si el mismo "NO" posee
"Netscape 4.0" o el "Internet Explorer 4.0" o Superior, se le mostrará un mensaje
de alerta, indicándole que el sitio no se visualizará correctamente.
*/
if (ns4 == "false" || ie4 == "false") alert("Lo siento, no podrás visualizar correctamente este\nsitio, necesitas tener instalado (IE o Netscape 4.0 \no Superior)")
//-->
</SCRIPT>
<br>
<br>
<!-- Capa de Enlaces -->
<div id="enlaces" style="position:absolute; left:228px; top:136px; width:344px; height:12px; z-index:1; visibility: hidden">
<br><br><font face="Verdana" size="1">Estos son mis enlaces: <a href="http://www.bocajuniors.com.ar">http://www.bocajuniors.com.ar</a><br>Boca Juniors - el último ganador de la Copa Intercontinental</font></div>
<!-- Fin de la capa -->
<!-- Capa de Noticias -->
<div id="noticias" style="position:absolute; left:228px; top:136px; width:344px; height:12px; z-index:1; visibility: hidden">
<br><br><font face="Verdana" size="1"><p align="Justify">Estas son las últimas noticias:
Martín "el Loco" Palermo, logró mojar en España,
el ex-delantero del equipo Xeneixe (Boca Juniors), logró marcar su primer
gol en la Liga Española, fué frente al equipo del Oviedo. Aguante
Martín. Te deseo la mejor de las suerte, y aguante el Submarino Amarrillo
"Villareal".</p> </font></div>
<!-- Fin de la Capa -->
<!-- Capa de Artículos -->
<div id="articulos" style="position:absolute; left:228px; top:136px; width:344px; height:12px; z-index:1; visibility: hidden">
<br><br><font face="Verdana" size="1">Estos son mis artículos: Buenos Aires -
Argentina.</font></div>
<!-- Fin de la Capa -->
<!-- Capa de Downloads -->
<div id="download" style="position:absolute; left:228px; top:136px; width:344px; height:12px; z-index:1; visibility: hidden">
<br><br><font face="Verdana" size="1">Estos son los archivos disponibles para descargar:
Lz. zip 485(Kb) - DMC.zip 849 (Kb) - ILUMINE 678 (Kb) - ASPLive.zip 948 (Kb).</font></div>
<!-- Fin de la capa -->
<!-- Capa de Ejemplos -->
<div id="ejemplos" style="position:absolute; left:228px; top:136px; width:344px; height:12px; z-index:1; visibility: hidden">
<br><br><font face="Verdana" size="1">Estos son los ejemplos disponibles en este momento:
alertas - banner - seguridad - reloj - ventanas, etc.</font></div>
<!-- Fin de la capa -->
<div align="center"><font face="Verdana" size="4"><b>Este es otro ejemplo, del
uso de las capas</b></font><br>
<br>
<br>
</div>
<table width="45%" border="1" cellspacing="1" cellpadding="1" align="center" bgcolor="#FFFFFF" bordercolor="#FFFFFF">
<tr bgcolor="#E1E1E1" bordercolor="#FFFFFF">
<td>
<div align="center"><font size="1" face="Verdana">
<a href="enlaces.htm"
onmouseover="MostrarCapa('enlaces')"
onmouseout="OcultarCapa('enlaces')">Enlaces</font></div>
</td>
<td>
<div align="center"><font size="1" face="Verdana">
<a href="articulos.htm"
onmouseover="MostrarCapa('articulos')"
onmouseout="OcultarCapa('articulos')">Artículos</font></div>
</td>
<td>
<div align="center"><font size="1" face="Verdana">
<a href="downloads.htm"
onmouseover="MostrarCapa('download')"
onmouseout="OcultarCapa('download')">Downloads</font></div>
</td>
<td>
<div align="center"><font size="1" face="Verdana">
<a href="ejemplos.htm"
onmouseover="MostrarCapa('ejemplos')"
onmouseout="OcultarCapa('ejemplos')">Ejemplos</font></div>
</td>
<td>
<div align="center"><font size="1" face="Verdana">
<a href="noticias.htm"
onmouseover="MostrarCapa('noticias')"
onmouseout="OcultarCapa('noticias')">Noticias</font></div>
</td>
</tr>
</table>
<br>
<br><br><br>
<font face="verdana" size=1>
</body>
</html> 
Categoría: 
