JavaScript: layers

Tip

Bitte beachten Sie, dass dieses Array nur im Netscape Navigator 4.x verfügbar ist.

Der Zugriff auf einen einzelnen Layer kann entweder über das layers-Array oder direkt über den Namen (name-Attribut) oder die ID (id-Attribut) des Layers laufen. An das Array werden - wie bei jedem anderen Array - eckige Klammern notiert. Innerhalb der Klammern wird dann der nullbasierte Index des auszugebenden Layers oder der Name/die ID des Layers notiert. Als weitere Möglichkeit können hier auch die Klammern weggelassen werden und nur der Name/die ID als Unterobjekt an das Array heran notiert werden. Beispiel:

a = document.layers[0];
b = document.layers['meinLayer'];
c = document.layers.meinLayer;
d = document.meinLayer;

Die vierte Zeile des Beispiels zeigt darüber hinaus eine weitere Möglichkeit ein einzelnes Layer-Objekt anzusprechen. Hierbei wird das layers-Array einfach völlig weggelassen und nur der Name/die ID des Layers angehängt.
Bitte beachten Sie, dass jeder Layer ein eigenes Dokument darstellt. Das bedeutet, dass ein Layer, der sich in einem anderen befindet, auch über diesen Aufgerufen werden muss. Beispiel:

// HTML:
<layer name="lay1">
  ...
  <layer id="lay2"> ... </layer>
  ...
</layer>

//JavaScript:
a = document.layers['lay1'].document.layers['lay2'];

Unterobjekte  

Das Objekte besitzt die folgenden Unterobjekte:

• background (~ image-Objekt)
• clip

Eigenschaften  

above

Die above-Eigenschaft gibt den Layer aus, der den nächst höheren z-Index hat. Handelt es sich bei dem Ursprungslayer selbst um den höhsten, wird null zurückgegeben.
Notation: Objekt.above

a = meinlayer.above;

bgColor

Die bgColor-Eigenschaft liest oder setzt die Hintergrundfarbe des Layers.
Notation: Objekt.bgColor

document.layers['meinlayer'].bgColor = 'red';

below

Die below-Eigenschaft gibt den Layer aus, der den nächst niedrigeren z-Index hat. Handelt es sich bei dem Ursprungslayer selbst um den niedrigsten, wird null zurückgegeben.
Notation: Objekt.below

if(meinlayer.below == null){alert('Tiefster Layer');}

document

Die document-Eigenschaft gibt eine Referenz auf das Dokument des Layers (document-Objekt) wieder.
Notation: Objekt.document

document.layers[0].document.open();
document.layers[0].document.write('Neuer Layerinhalt!');
document.layers[0].document.close();

id

Die id-Eigenschaft gibt die ID eines Layers an.
Notation: Objekt.id

for(i=0; i<document.layers.length; i++)
{
 alert('Der Layer '+i+' hat die ID: 'document.layers[i].id);
}

left

Die left-Eigenschaft gibt oder setzt den Abstand des Layers

• a) zum linken Rand des Fensters oder des Elternlayers, wenn es sich um ein layer-Element handelt oder
• b) zum linken Rand des Elternelements, wenn es sich um ein ilayer-Element handelt.

Der Abstand wird anhand einer Zahl angegeben, die in Pixel ausgedrückt ist.
Notation: Objekt.left

document.layers['meinLayer'].left = 100;

name

Die name-Eigenschaft gibt den Namen eines Layers an.
Notation: Objekt.name

for(i=0; i<document.layers.length; i++)
{
 alert('Der Layer '+i+' hat den Namen: 'document.layers[i].name);
}

pageX & pageY

Die pageX-Eigenschaft gibt oder setzt den horizontalen Abstand des Layers in Pixel relativ zum Dokument. Die pageY-Eigenschaft gibt oder setzt den entsprechenden vertikalen Abstand.
Notation: Objekt.pageX
Notation: Objekt.pageY
Kein Beispiel.

parentLayer

Die parentLayer-Eigenschaft gibt den Layer an, in dem sich der Ursprungslayer (Elternlayer) befindet. Gibt es keinen solchen Elternlayer, wird das zugehörige window-Objekt zurückgegeben.
Notation: Objekt.parentLayer

a = document.layers[0].document.layers[0].parentLayer;
// a == document.layers[0];

siblingAbove & siblingBelow

Die siblingAbove-Eigenschaft gibt den Layer aus, der 1. den gleichen Elternlayer (falls keiner existiert, wird das Dokument verwendet) besitzt und 2. den nächst höheren z-Index besitzt. Existiert kein höherer Layer wird null zurückgegeben.
Die siblingBelow-Eigenschaft gibt einen entsprechenden Layer aus, der 1. erfüllt und den nächst tieferen z-Index besitzt. Auch hier wird null zurückgegeben, sofern kein Layer gefunden wird.
Notation: Objekt.siblingAbove
Notation: Objekt.siblingBelow
Kein Beispiel.

src

Die src-Eigenschaft liest oder setzt die Adresse des anzuzeigenden Dokuments im Layer.
Notation: Objekt.src

document.meinlayer.src = 'https://www.a-coding-project.de';

top

Die top-Eigenschaft gibt oder setzt den Abstand des Layers

• a) zum oberen Rand des Fensters oder des Elternlayers, wenn es sich um ein layer-Element handelt oder
• b) zum oberen Rand des Elternelements, wenn es sich um ein ilayer-Element handelt.

Der Abstand wird anhand einer Zahl angegeben, die in Pixel ausgedrückt ist.
Notation: Objekt.top

document.layers['meinLayer'].top = 100;

visibility

Die visibility-Eigenschaft liest oder setzt einen String-Wert, der beschreibt, ob der Layer sichtbar (show), unsichtbar (hide) oder dem Elternlayer angepaßt (inherit) sein soll.
Notation: Objekt.visibility

// layer verstecken
document.layers[0].visibility = 'hide';

x & y

Die x-Eigenschaft ist ein Synonym der left-Eigenschaft. Sie beschreibt den Abstand des Layers nach links. Die y-Eigenschaft ist ein Synonym der top-Eigenschaft. Sie beschreibt den Abstand des Layers nach oben.
Notation: Objekt.x
Notation: Objekt.y
Beispiel siehe left-Eigenschaft.

Methoden  

captureEvents

Die captureEvents-Methode veranlaßt, dass der Layer auf bestimmte Events reagiert. Als Parameter erwartet die Methode ein oder mehrere Event-Handler. Diese müssen als Eigenschaft des Event-Objekts vorliegen (also z.B. Event.CLICK oder Event.ERROR) und werden durch ein Senkrechtstrich (|) voneinander getrennt.
Notation: Objekt.captureEvents(Event1 [ | Event2 | ...])

document.meinlayer.captureEvents(Event.BLUR | Event.ERROR);

handleEvent

Die handleEvent-Methode löst ein Ereignis und die damit verbundenen Funktionen aus. Als Parameter wird das entsprechende Event als Eigenschaft erwartet (z.B. Event.CLICK oder Event.MOU SEO VER)
Notation: Objekt.handleEvent(Ereignis)

document.layers[0].handleEvent(Event.MOUSEOVER);

load

Die load-Methode läd ein neues Dokument in den Layer und ändert dabei die Breite des Layers. Als Werte werden die zu ladende Adresse sowie die Breitenangabe (in dieser Reihenfolge) erwartet.
Notation: Objekt.load(Adresse, Breite)

document.layers[0].load('neueseite.htm',300);

moveAbove

Die moveAbove-Methode setzt den Layer über (z-Index) einen anderen, ohne dabei seine Koordinaten zu verändern. Als Parameter wird der Layer erwartet über dem der Quelllayer liegen soll (in z-Richtung).
Notation: Objekt.moveAbove(Layer)

document.layers[0].moveAbove(document.layers[1]);

moveBelow

Die moveBelow-Methode setzt den Layer unter (z-Index) einen anderen, ohne dabei seine Koordinaten zu verändern. Als Parameter wird der Layer erwartet unter dem der Quelllayer liegen soll (in z-Richtung).
Notation: Objekt.moveBelow(Layer)

document.layers[1].moveBelow(document.layers[0]);

moveBy

Die moveBy-Methode verschiebt den Layer relativ zu seiner vorherigen Lage. Als Werte werden dazu der horizontale und der vertikale Weg erwartet (in dieser Reihenfolge) um den der Layer verschoben werden soll.
Notation: Objekt.moveBy(x,y)

document.layers[0].moveBy(100,200);

moveTo

Die moveTo-Methode verschiebt den Layer auf eine bestimmte Koordinate innerhalb des Fensters oder Elternlayers. Als Werte werden dazu die x- und y-Koordinate erwartet (in dieser Reihenfolge) an der Stelle der Layer positioniert werden soll.
Notation: Objekt.moveTo(x,y)

document.onmousemove = machwas;
function machwas(e)
{
 document.layers[0].moveTo(e.x,e.y);
}

moveToAbsolute

Die moveToAbsolute-Methode, entspricht in etwa der moveTo-Methode. Sie setzt den Layer auf eine bestimmte Koordinate fest, deren Werte mit x und y übergeben werden. Der Unterschied zur moveTo-Methode besteht darin, dass die Koordinatenangaben sich immer exakt auf das Fenster beziehen und nicht auf den Elternlayer.
Notation: Objekt.moveToAbsolute(x,y)
Beispiel siehe moveTo-Methode.

releaseEvents

Die releaseEvents-Methode veranlaßt, dass ein Layer auf bestimmte, zuvor mit captureEvents definierte, Ereignisse nicht mehr reagiert. Dazu erwartet die Methode einen oder mehrere Parameter, die das jeweilige Ereignis beschrieben.
Notation: Objekt.releaseEvents(Ereignis1 [, Ereignis2 , ...])

function doerror()
{
 alert('Es ist ein Fehler aufgetreten!');
 document.layers[0].releaseEvents(Event.ERROR);
}
document.layers[0].captureEvents(Event.ERROR);
document.layers[0].onerror = doerror;

resizeBy

Die resizeBy-Methode verändert die Größe des Layers relativ zur vorherigen Größe. Als Werte werden eine Breiten- und eine Höhenangabe (in dieser Reihenfolge) erwarten, die beschreiben um wieviel der Layer vergrößert bzw. verkleinert werden soll.
Notation: Objekt.resizeBy(x,y)

document.layers[0].width = 300;
document.layers[0].height = 200;
document.layers[0].resizeBy(-100,100);
// width == 200; height == 300

resizeTo

Die resizeTo-Methode setzt die Größe des Layers auf einen bestimmten Wert. Dazu werden die neue Breite und die neue Höhe des Layers (in dieser Reihenfolge) als Parameter erwartet.
Notation: Objekt.resizeTo(x,y)

documen.layers[0].width = 300;
documen.layers[0].height = 200;
documen.layers[0].resizeTo(200,300);
// width == 200; height == 300

routeEvent

Die routeEvent-Methode gibt ein Ereignis an die nächst untere Ebene weiter. Hat beispielsweise der Layer ein ERROR-Ereignis eines Bildes abgefangen, so kann das Ereignis hiermit an das Bild weiter gegeben werden. Als Parameter wird dazu das weiterzuleitende Ereignisobjekt erwartet.
Notation: Objekt.routeEvent(Ereignisobjekt)
Kein Beispiel.

Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.

Über uns

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project