Demo Dynamic HTML - Layer Crossbrowser

Layer Crossbrowser

Compatibilidad: Ms Internet Explorer, Netscape

Útil y fácil de configurar, esta demo presenta una de las mayores ventajas de DHTML: la posibilidad de modificar el contenido de una página de modo dinámico y tras haber cargado la misma.
Esta demo, además de por el archivo .htm, está compuesta por tres imágenes "TOP1.gif", "TOP2.gif" y "TOP3.gif" (todas presentes en el archivo zipado), que se visualizan según el layer que seleccionemos. Como es obvio, podemos sustituir las imágenes con texto y colocar los layer en cualquier punto de la página.

[ Muestra el ejemplo práctico ]

el código para insertar en tu página

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

<SCRIPT LANGUAGE="JavaScript"> 	//Define global variables

var totalLayersInLoop=3;

var layerNumShowing=1;

function init(){

if (navigator.appName == "Netscape") {

layerStyleRef="layer.";

layerRef="document.layers";

styleSwitch="";

}else{

layerStyleRef="layer.style.";

layerRef="document.all";

styleSwitch=".style";

} 	}

function showLayerNumber(number){

var layerNumToShow=number;

hideLayer(eval('"layer' + layerNumShowing+'"'));

showLayer(eval('"layer' + layerNumToShow+'"'));

layerNumShowing=layerNumToShow;	 	}

function showPreviousLayer(){

var layerNumToShow=layerNumShowing-1;

if (layerNumToShow < 1){layerNumToShow=totalLayersInLoop;}

hideLayer(eval('"layer' + layerNumShowing+'"'));

showLayer(eval('"layer' + layerNumToShow+'"'));

layerNumShowing=layerNumToShow; 	}

function showNextLayer(){

var layerNumToShow=layerNumShowing+1;

if (layerNumToShow > totalLayersInLoop){layerNumToShow=1;}

hideLayer(eval('"layer' + layerNumShowing+'"'));

showLayer(eval('"layer' + layerNumToShow+'"'));

layerNumShowing=layerNumToShow; 	}

function showLayer(layerName){

eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="visible"'); 	}

function hideLayer(layerName){

eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="hidden"'); 	}

</SCRIPT>

#layer1 {POSITION: absolute; Z-INDEX: 10; VISIBILITY: visible; LEFT: 150px; TOP: 180px;}

#layer2 {POSITION: absolute; Z-INDEX: 20; VISIBILITY: hidden; LEFT: 150px; TOP: 180px;}

#layer3 {POSITION: absolute; Z-INDEX: 30; VISIBILITY: hidden; LEFT: 150px; TOP: 180px;}

#loopControls {POSITION: absolute; Z-INDEX: 40; VISIBILITY: visible; LEFT: 300px; TOP: 150px;}

</STYLE>

</HEAD>

</DIV>

<DIV ID="layer2" >

</DIV>

<DIV ID="layer3" >

</DIV>

<A HREF="javascript:showPreviousLayer()">Precedente</a>  <BR>

<A HREF="javascript:showNextLayer()">Sucesivo</a> <BR>

<A HREF="javascript:showLayerNumber(1)">Layer número 1</a> <BR>

<A HREF="javascript:showLayerNumber(2)">Layer número 2</a> <BR>

<A HREF="javascript:showLayerNumber(3)">Layer número 3</a> <BR> 		 	</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]