DHTML Fenster - HTMLopen.de

Kompatibilität: Ms Internet Explorer, Netscape

Nützlich und sehr einfach zu konfigurieren in DHTML, ist die Funktion welcher ermöglicht das Inhalt einer Seite in einer Dynamischer Seite zu modifizieren.
Dieses Beispiel, welcher aus einer Html Datei besteht, ist mit 3 Grafiken "TOP1.gif", "TOP2.gif" e "TOP3.gif" versehen (alle Files sind in einem Zip-Format enthalten).

[ Das Beispiel zeigen ]

HTML Code für deine Website

<HTML> <HEAD><TITLE>HTMLopen - Dynamic HTML Beispiele</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> <STYLE TYPE="text/css">#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>  <BODY onLoad="init()">   	 	<DIV ID="layer1" > 	<IMG SRC="TOP1.gif" WIDTH=87 HEIGHT=61 BORDER=0>  	</DIV> 	 	<DIV ID="layer2" > <IMG SRC="TOP2.gif" WIDTH=81 HEIGHT=83 BORDER=0>  	</DIV> 	 	<DIV ID="layer3" > <IMG SRC="TOP3.gif" WIDTH=52 HEIGHT=88 BORDER=0>  	</DIV> 	 		<DIV ID="loopControls" >  		<A HREF="javascript:showPreviousLayer()">Precedente</a>  <BR>
                    		<A HREF="javascript:showNextLayer()">Successivo</a> <BR>
                    		<A HREF="javascript:showLayerNumber(1)">Layer numero 1</a> <BR>
                    		<A HREF="javascript:showLayerNumber(2)">Layer numero 2</a> <BR>
                    		<A HREF="javascript:showLayerNumber(3)">Layer numero 3</a> <BR>
                    		</DIV>  </BODY> </html>

Layer Crossbrowser