DHTML:: Layer(Ebenen)- Roll - Over mit DHTML und JavaSkript

{DHTML: Layer-Roll-Over}

Bei diesem Skript werden verschiedene Ebenen auf Klick ein- bzw. ausgeblendet. Eignet sich zum Beispiel als Ersatz für Frames.

Quelltext:

<html> <head><script LANGUAGE="JavaScript">  </script> <style TYPE="text/css"> #demo1 {position: absolute; visibility: visible; left: 200px; top: 150px;} #demo2 {position: absolute; visibility: hidden; left: 200px; top: 150px;} #demo3 {position: absolute; visibility: hidden; left: 200px; top: 150px;} #Steuerung {position: absolute; z-index: 150; visibility: visible; left: 50px; top: 150px;} </style> <title>DHTML-Beispiel - Ebenen-Rollover</title> </head> <body BGCOLOR="#FFFFFF" link="#800000" vlink="#800000" alink="#FF0000"> <div ID="demo1"> <p>... Dies ist der Inhalt von Ebene 1 ... ... Dies ist der Inhalt von Ebene 1 ... <br> ... Dies ist der Inhalt von Ebene 1 ... ... Dies ist der Inhalt von Ebene 1 ... </p> </div><div ID="demo2"> <p>... Dies ist der Inhalt von Ebene 2 ... <br> ... Dies ist der Inhalt von Ebene 2 ... <br> ... Dies ist der Inhalt von Ebene 2 ... <br> ... Dies ist der Inhalt von Ebene 2 ... <br> ... Dies ist der Inhalt von Ebene 2 ... <br> ... Dies ist der Inhalt von Ebene 2 ... <br> ... Dies ist der Inhalt von Ebene 2 ... </p> </div><div ID="demo3"> <p>... Dies ist der Inhalt von Ebene 3 ... </p> </div><div ID="Steuerung"><a HREF="javascript:zeigeEbeneNr(1)"> <p>Zeige Ebene 1</a> <br> <a HREF="javascript:zeigeEbeneNr(2)">Zeige Ebene 2</a> <br> <a HREF="javascript:zeigeEbeneNr(3)">Zeige Ebene 3</a> <br> </p> </div> </body> </html>

... Dies ist der Inhalt von Ebene 1 ... ... Dies ist der Inhalt von Ebene 1 ...
... Dies ist der Inhalt von Ebene 1 ... ... Dies ist der Inhalt von Ebene 1 ...

... Dies ist der Inhalt von Ebene 2 ...
... Dies ist der Inhalt von Ebene 2 ...
... Dies ist der Inhalt von Ebene 2 ...
... Dies ist der Inhalt von Ebene 2 ...

... Dies ist der Inhalt von Ebene 3 ... ... Dies ist der Inhalt von Ebene 3 ...
... Dies ist der Inhalt von Ebene 3 ... ... Dies ist der Inhalt von Ebene 3 ...

Zeige Ebene 1
Zeige Ebene 2
Zeige Ebene 3