Demo Dynamic HTML - Texto que se oculta

Texto que se oculta

Compatibilidad: Ms Internet Explorer, Netscape

Esta demo muestra uno de los aspectos más interesantes de Dynamic HTML. Es posible hacer que, en el momento de cargar, aparezca una página vacía, la cual permite expandir, mediante el uso de layer y css, el contenido precedentemente impostado.
Pulsando la imagen superior izquierda, se abre una especie de menú con enlaces que, en su momento, pueden ser de gran utilidad para la navegación

[ Muestra el ejemplo práctico ]

el código para insertar en tu página

<TITLE>Demo Dynamic HTML: ejemplo práctico </TITLE>

if (document.layers) {n=1;ie=0}

if (document.all) {n=0;ie=1}

function init() {

if (n) tab = document.tabDiv

if (n) poptext = document.poptextDiv

if (ie) tab = tabDiv.style

if (ie) poptext = poptextDiv.style

}

var tabShow=1;

function hidepoptext() {

if (tabShow == 0) {

if (n) {

tab.visibility = "hide";

tab.visibility = "show";

poptext.visibility = "hide";

tabShow = 1;

return;

}

if (ie) {

tab.visibility = "hidden";

tab.visibility = "visible";

poptext.visibility = "hidden";

tabShow = 1;

return;

}

}
        if (tabShow == 1) {

if (n) {

tab.visibility = "hide";

tab.visibility = "show";

poptext.visibility = "show";

tabShow = 0;

}

if (ie) {

tab.visibility = "hidden";

tab.visibility = "visible";

poptext.visibility = "visible";

tabShow = 0;

}
}
}

</script>

<style>

<!--

#tabdiv {

position:absolute;

top:150px;

left:200px;

z-index:2;

visibility:show;

}

#poptextdiv {

visibility:hide;

visibility:hidden;

position:absolute;

width:150px;

top:200px;

left:200px;

z-index:0;

color:white;

border-color:black;

border-width:2px;

background-color:black;

color:black;

padding:10 5 10 5;

z-index:1;
}

-->

</style>

</HEAD>

<A HREF="http://www.htmlpoint.com">Índice</A><br>

<A HREF="http://www.htmlpoint.com/java">JavaScript</A><br>

<A HREF="http://www.htmlpoint.com/controllo">Control</A><br>

<A HREF="http://www.htmlpoint.com/grafica">Imágenes</A><br>

</font>

</div>

</body>
</html>

[Baja en un único archivo .zip, las imágenes y demás archivos necesarios
para el funcionamiento de las demo de esta sección]