|
|
|
Häschen hüpf !
Beschreibung
Ein Häschen hüpft quer über die Bildfläche.
Hierzu wird die Layer-Technik von Netscape verwendet.
Quelltext
<head>
<script language="JavaScript">
<!--
var xx,dx;
var yy,dy;
var nn;
function init() {
if(document.layers == null) {
alert("Ihr Browser unterstuetzt noch keine Layer");
return;
}
dx=30;
dy=-10;
nn=0;
xx=window.innerWidth;
yy=window.innerHeight/2;
move();
}
function move() {
document.layers[nn].visibility=false;
nn=(nn+1)%8;
xx=xx-dx;
if(xx < -100)xx=window.innerWidth;
document.layers[nn].pageX=xx+window.pageXOffset;
yy=yy+dy;
if(yy < 0) {
yy=0;
dy= -dy;
} else if(yy > (window.innerHeight-100)) {
yy=window.innerHeight-100;
dy= -dy;
}
document.layers[nn].pageY=yy+window.pageYOffset;
document.layers[nn].visibility=true;
setTimeout("move()", 300);
}
//-->
</script>
</head>
<body onLoad="init()">
<script language="JavaScript">
<!--
if(document.layers != null) {
for(ii=0; ii<8; ii++) {
document.write('<layer id="l'+ii+'" visibility=hide>');
document.write('<img src="rr'+ii+'.gif">');
document.write('</layer>');
}
}
//-->
</script>
</body>
Erläuterung
Mit der Layer-Technik von Netscape besteht die Möglichkeit,
verschiedene Elemente eines Dokuments auf unterschiedliche Z-Ebenen zu legen.
Man kann sich ein Layer wie eine Transparent-Folie vorstellen, auf der
Teile des Seiteninhalts abgebildet sind. Diese Folien werden übereinander
gelegt und können relativ zueinander verschoben werden.
Im vorliegenden Beispiel wurde jeweils ein Bild des laufenden Hasens auf ein
Layer gelegt, während das Grund-Dokument auf keinem explizitem Layer liegt
und damit die unterste Ebene bildet. Von den Layern mit den Bildern wird immer
nur jeweils eines sichtbar geschaltet; zusätzlich wird die Position der
Layer ständig geändert.
Referenz
[layers-Array]
[layer-Objekt]
layers[], layers.length
Das layers-Array ist eine Eigenschaft des document-Objekts
und enthält alle Layer, die eine
Hierarchie-Stufe unter dem jeweiligen document-Objekt liegen.
(Zur Indizierung des Arrays vergleiche die Hinweise zum forms-Array
auf Seite 08).
layers.length gibt die Anzahl der Elemente im layers-Array
an.
Die Elemente des Feldes sind jeweils layer-Objekte.
layer-Objekt
Ein layer-Objekt besitzt folgende Eigenschaften :
above  | Das nächst "höhere" Layer in der Reihenfolge der Überdeckung bezogen auf alle Layer im aktuellen Dokument |
| background |
Image Objekt einer Hintergrund-Grafik. Mit document.layer.background.src="http://..." kann die Hintergrundgrafik neu geladen werden. |
| below | Das nächst "niedrigere" Layer in der Reihenfolge der Überdeckung bezogen auf alle Layer im aktuellen Dokument |
| bgcolor | Hintergrundfarbe |
| clip.top clip.left clip.right clip.bottom clip.width clip.height | Beschreibung eines Rechtecks, mit dem das Layer beschnitten wird. Damit können z.B. Teilbereiche eines Bildes dargestellt werden. |
| document | document-Objekt, daß alle innerhalb des Layers definierte Links, Images (und auch wieder Layer) etc. enthält |
| left | horizontaler Abstand der linken Kante des Layers zur linken Kante des Eltern-Elements (relativ) |
| name | Name des Layers |
| pageX | horizontaler Abstand der linken Kante des Layers zur linken Kante des aktuellen Fensters (absolut) |
| pageY | horizontaler Abstand der oberen Kante des Layers zur oberen Kante des aktuellen Fensters (absolut) |
| parentLayer | Das Eltern-Layer des aktuellen Layers. Wenn das aktuelle Layer nicht Bestandteil eines übergeordneten Layers ist, dann wird das übergeordnete window-Objekt geliefert. |
| siblingAbove | Das nächst "höhere" Layer in der Reihenfolge der Überdeckung bezogen auf diejenigen Layer, die das gleiche Eltern-Layer haben |
| siblingBelow | Das nächst "niedrigere" Layer in der Reihenfolge der Überdeckung bezogen auf diejenigen Layer, die das gleiche Eltern-Layer haben |
| src | URL eines HTML-Dokuments, das den Inhalt des Layers beschreibt |
| top | horizontaler Abstand der oberen Kante des Layers zur oberen Kante des Eltern-Elements (relativ) |
| visibility | Gibt an, ob ein Layer sichtbar ist. Kann die Werte "show" (sichtbar) oder "hide" (unsichtbar) annehmen. |
| zIndex | Dieser Parameter steuert, wie sich unterschiedliche Layer überdecken. Ein Layer mit größerem zIndex verdeckt eines mit kleinerem. Der Wert muß größer oder gleich Null sein. |
Außerdem verfügt das layer-Objekt über folgende Methoden :
| load(src, width) | Der Inhalt des Layers wird erneut geladen, dazu wird das mit src angegebene Dokument gelesen. Außerdem wird die Breite des Layers auf den Wert width gesetzt. | ||
| moveAbove(layer) | Das aktuelle Layer wird in der Überdeckungsreihenfolge über das Layer layer gehoben. | ||
| moveBelow(layer) | Das aktuelle Layer wird in der Überdeckungsreihenfolge unter das Layer layer geschoben. | ||
| moveBy(dx, dy) | relative Bewegung um dx, dy Pixel. | ||
| moveTo(x, y) | Bewegung zur Position x, y. Ob sich die Koordinaten relativ auf ein Elternelement oder absolut auf die Seite beziehen, hängt davon ab, wie das Layer definiert wurde. | ||
| moveToAbsolute(x, y) | Bewegung zur Position x, y in absoluten Koordinaten der Seite. | ||
| resizeBy(dx, dy) |
Änderung der Größe des Layers relativ um dx, dy Pixel.
| resizeTo(x, y) |
Änderung der Größe des Layers absolut auf x, y Pixel.
| |
Mehr zum Thema Layer finden Sie bei
Netscape.
| Auf der nächsten Seite kann der Anwender Layer manuell verschieben. |
|
