codigo javascript que nos enseña como mostrar y ocultar capas ( layers/ divs ) en los documentos html.
<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>
Download Script
Ver ejemplo javascript
