Ebenen Tauschen
Diese Anwendung zeigt Ihnen, wie Sie sich bequem durch
verschiedenen Ebenen bewegen können. Wenn Sie beispielsweise zehn
unterschiedliche Ebenen haben, in denen jeweils eigene Inhalte
stehen. Diese Ebenen soll der Anwender nur dann sehen, wenn er einen
entsprechenden Button, bzw. Verweis anklickt.
Für diese Aufgabe benötigen Sie eine Funktion, welche einen
Loop durch die unterschiedlichen Ebenen erzeugt. Damit diese
Anwendung auch ohne Problem abläuft, ist es notwendig die Ebenen
numeriert zu benennen (Ebene1, Ebene2, usw.). Binden Sie zunächst
die Ebenen nach folgendem Muster in Ihr Dokument ein:
<DIV ID="demo1"> ... Inhalt Ebene 1 ... </DIV>
<DIV ID="demo2"> ... Inhalt Ebene 2 ... </DIV>
... usw. ...
Im Head-Bereich des HTML-Dokuments werden nun die
Style-Sheet-Angaben zu diesen Ebenen definiert:
#demo1 { position: absolute; visibility: visible; left: 150px; top:
80px; }
Die Eigenschaft "position" kann entweder
"absolute" oder "relative" sein. Im ersten Fall
wird der Stil an einer genauen, absoluten Position im Fenster
ausgegeben, im zweiten an der Stelle im Text, an der er steht,
genauso wie ein normales, eingebundes Bild. Mit der
"visibility"-Eigenschaft kann man diesen Stil unsichtbar,
"hidden", oder wieder sichtbar, "visible",
machen. Erlaubt ist noch der Wert "inherit", der bedeutet,
dass der Stil die Eigenschaft des Stils übernehmen soll, von dem er
abgeleitet wurde. "top" gibt die Y-Position des Stils in
Pixeln an, "left" die X-Position. Neben diesen Parametern
gibt es noch ein Vielzahl an weiteren, auf die wir hier auf Grund
des Umfangs nicht näher eingehen können. In unserem
Die Inhalte der verschiedenen Ebenen können also entweder
sichtbar oder unsichtbar sein. Auf diese Eigenschaften haben Sie
selbst nach dem Laden der Seite noch Einfluß.
Um eine Ebene auf diese Weise zu manipulieren benötigen Sie die
visibility-Eigenschaft. Netscape verwendet hierbei die folgende
Syntax:
document.Ebene.visibility =
"show"; // Ebene zeigen
document.Ebene.visibility = "hide"; // Ebene
verstecken
Während Sie mit dem Internet-Explorer diese Syntax verwenden müssen:
Ebene.style.visibility =
"visible"; // Ebene zeigen
Ebene.style.visibility = "hidden"; // Ebene
verstecken
Damit Ihre Anwendungen auf beiden Browser funktionieren, müssen
Sie diese unterschiedlichen Eigenschaften berücksichtigen. Um eine
Ebene anzuzeigen, verwenden Sie folgende Funktion, wobei zuvor der
verwendete Browser abgefragt werden muß:
function zeigen(name) {
if (ns) {
document.layers[''+name].visibility =
"show";
}
else {
document.all[''+name].style.visibility =
"visible"
}
}
Diese Anweisung erwarten als Parameter den Namen der
entsprechenden Ebene und deckt beim Ausführen des Programmes die
jeweilige Ebene auf. Analog hierzu erzeugen Sie eine Funktion um
eine Ebene wieder zu verbergen:
function verbergen(name) {
if (ns){
document.layers[''+name].visibility =
"hide"
}
else {
document.all[''+name].style.visibility =
"hidden"
}
}
Dank dieser allgemein gehaltener Anweisungen, sind Sie nun in der
Lage jede beliebige Ebene mit dem entsprechenden Parameter
aufzurufen. Als nächstes benötigen Sie eine Funktion, welche den
Loop zwischen den jeweiligen Ebenen realisiert:
var i = 1;
var test = "demo";
In der Variablen i wird die Nummer der jeweils angezeigten Ebene
gespeichert. Sobald ein Anwender eine neue Ebene aufdeckt, wird die
entsprechende Nummer in dieser Variablen abgespeichert. Da die Ebene
Nummer eins als erstes angezeigt wird, müssen Sie diese zu Beginn
auch initialisieren. Die Variable test beinhaltet den Namen der
Ebenen ohne Nummern.
function zeigeEbeneNr(ebene_nr){
verbergen(eval('"' + test + i +'"'));
zeigen(eval('"' + test + ebene_nr
+'"'));
i = ebene_nr;
}
Der Funktion zeigeEbeneNr wird als Parameter die Nummer der Ebene
(ebene_nr) übergeben, welche aufgedeckt werden soll. In dieser
Anweisung werden die zuvor erzeugten Funktionen zum zeigen und
verbergen einer Ebene aufgerufen. Übergeben Sie der Funktion
beispielsweise die Numer 2, wird die aktuell angezeigte erste Ebene
versteckt und die zweite Ebene aufgedeckt und die Variable i auf 2
gesetzt. Beim nächsten Aufruf der Anweisung wird die zweite Ebene
verdeckt und so weiter. Um das Skript auszuführen benötigen Sie
einen event-Handler:
<a href="javascript:zeigeEbeneNr(1)">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>
<a href="javascript:zeigeEbeneNr(...)"> Zeige Ebene ...</a><BR>
Diese Befehle können an einer beliebigen Stelle im Dokument
angebracht werden. Statt Verweisen können Sie auch Formularbuttons
oder Grafiken verwenden. Ihr neues interaktives Webangebot kann nun
eröffnet werden.
| 
DIENSTE
