|
Das Konzept übereinander gestapelter Schichten (layers) wurde
ursprünglich von Netscape erfunden, war jedoch nicht konsequent
ausgeführt und setzte sich deshalb nicht durch.
|
Heute werden Schichten mit CSS definiert - stapelbar, transparent oder
gefärbt, beweglich - Jedenfalls mit allen gängigen Browsern kompatibel.
|
CSS
|
Cascading Stylesheets |
| CSS-Position | Absolute, relative und fixe Position von Elementen |
| Überlagerung | Demo von überlagerten Schichten |
| z-index | CSS Programmierung der Überlagerung |
| Bewegung | Programmierte Bewegung von Schichten, Transparenz |
|
Bewegung von Schichten mit der Maus
|
|
| Fenster | Bewegung ganzer Browser-Fenster |
Überlagerte Schichten mit CSS z-index |
|||||||||||||
|
|
||||||||||||
| Klicken sie eine Farb-Scheibe um sie in der Demo-Grafik nach vorne zu bringen. | Demo-Grafik aus 5 übereinander angeordneten Schichten. Mit der CSS-Eigenschaft z-index wird die Reihenfolge gesteuert. | ||||||||||||
Programmierung des z-index |
|
| Mit der CSS-Eigenschaft z-index wird die Reihenfolge übereinander liegender Elemente bestimmt. Der z-index wird mit einer ganzen Zahl bezeichnet. Je größer die Zahl, desto weiter vorne das entsprechende Element. Hier werden die Zahlen 1..5 verwendet, es sind jedoch beliebige Zahlen möglich, auch <0. | Unten der HTML-Code (vereinfacht) der 5 Demo-Farbscheiben. Eine Voraussetzung für die Überlagerung ist die vorherige Positionierung mit CSS-position (♦ Details). |
|
<img id="g_black" alt="" src="black.gif" style="position:absolute; z-index:1;" />
<img alt="" src="blue.gif" style="position:absolute; z-index:2;" /> <img alt="" src="white.gif" style="position:absolute; z-index:3;" /> <img alt="" src="red.gif" style="position:absolute; z-index:4;" /> <img alt="" src="green.gif" style="position:absolute; z-index:5;" /> |
|
|
Mit Javascript kann der z-index jedes Elements gelesen
und geändert werden, ebenso wie jede andere Eigenschaft
des style-Objekts. ♦ Details zum Javascript Zugriff auf das style-Objekt. |
function get_zi(id) {
Die Anwendung auf die schwarze Scheibe ergibt:
var n = document.getElementById(id);
}
var zi = n.style.zIndex; eturn zi; get_zi("g_black")=1;
|
Bewegung und Transparenz von Schichten |
|
|
Als Schichten eignen sich <img>-Grafiken
und <div>-Elemente. Beide können sowohl
transparente als auch undurchsichtige (opake) Teile enthalten.
Die 3 Elemente dieser Demo werden automatisch mit Javascript vor dem Hintergrund
dieses Textes bewegt. Ohne Angabe des z-index werden die
Schichten in ihrer Reihenfolge im Quelltext angeordnet. ♣ Die Grafik (Java-Maskottchen 'Duke') vom Typ (animated)-GIF enthält transparente und opake Teile. ♠ Der 'Text' befindet sich in einer <div>-Schicht. Da kein Hintergrund definiert wurde, ist diese Schicht transparent. Nur die Schrift-Zeichen sind opak. ♥ Das Wort OPAK befindet sich in einer <div>-Schicht mit Hintergrund-Farbe. Die komplette Schicht wird daher undurchsichtig. |
HTML-Code der 3 Demo-Elemente:
<div
id="opak" style="background-color:#FFCC99; width:75px;
position:absolute; left:200px; top:0px;">
OPAK </div>
<div id="text" style="color:#003399;width:75px; position:absolute; left:0px; top:0px;"> Text </div> <img id="duke" src="duke.gif" style="position:absolute; left:0px; top:0px;"> |
|
Schicht-Bewegungen dieser Art werden als Effekte eingesetzt: Eine oder mehrere
Grafiken (Schneeflocken, Schmetterlinge, ...) werden vor der Webseite bewegt.
Die Positionen werden mit Methode window.setTimeout periodisch (hier 200 ms) neu berechnet. Für relativ langsame Bewegungen und einfache Rechnungen ist Javascript schnell genug. OPAK
Text
|
function set_position(id,x,y) {
Live Bewegung des 'Duke':
var n = document.getElementById(id);
}
n.style.left = x.toString()+"px"; n.style.top = y.toString()+"px";
set_position("duke",0,0);
|
|
Die absolute Position muss nach dem Laden der Seite mit dem
→ onload-Ereignis (Event) live eingestellt werden, da man bei der
Programmierung weder Typ und Version des Browsers noch die Fenster-Größe kennt. ♦ Details dazu auf der Seite CSS-Position. |
Zusätzlich zur Lage (left,top) wird hier auch die Größe (width,height) jener Elemente live gemessen, über denen sich die Schichten bewegen sollen: Der 'Duke' bewegt sich in seinem Text-Kasten auf einer Ellipse, der 'Text' auf den beiden Diagonalen seines Kastens. |
Transparente Grafik:Grafik vom Typ PNG ist überlegen, da sich damit sowohl wenige ('indizierte') Farben (wie bisher mit GIF) als auch 'alle' Farben (JPEG) darstellen lassen.Darüber hinaus bietet PNG-Grafik einen 'α-Kanal' mit der Möglichkeit beliebiger Transparenz. Die Grafik rechts zeigt einen Farb-Verlauf von links nach rechts und einen Transparenz-Verlauf von oben nach unten. |
PNG ist ein Offener Standard wird von guten Browsern unterstützt. Der MSIE Browser zeigt PNG-Grafik ersta ab Version 7 korrekt an. Bewegen sie die PNG-Grafik mit der Maus, um die Transparenz live zu sehen. ♦ Diese Grafik wurde mit einem kleinen → PHP-Programm automatisch erzeugt. |
Interaktive Bewegung - Elemente mit der Maus ziehen |
|||||
|
Bewegen sie die Symbole oder das Fadenkreuz mit der Maus !
Mit Klick auf RESET wird das Kreuz wieder auf seine Original-Position gestellt Tipp: Ziemlich viele Elemente dieses Kapitels sind beweglich . . . |
|
||||
|
Das 'Fadenkreuz' wurde relativ positioniert, d.h.
mit left:0px; top:0px; befindet es sich an seiner
durch den Browser festgelegten Original-Position.
|
<img id="cross" src="cross.png"
style="position:relative;
left:0px;
top:0px; height:101px; width:101px;"
onclick="drag_start()">
|
||||
|
Leider ist es nicht trivial, eine Schicht interaktiv zu bewegen:
Die Programmierung von
→ Ereignissen (Events) funktioniert leider noch immer nicht
Browser-unabhängig. Programme, die mit allen gängigen Browsern
funktionieren sollen, erfordern daher relativ viel Aufwand.(Nur) Gute Browser bewegen alle Teile einer Schicht ! - Auch die darin enthaltenen Bilder ! Bei Interesse finden sie alle Details der Programme im Quelltext dieser Seite. 
Übrigens: Auch in einer bewegten Schicht funktionieren alle Links,
Javascript-Programme usw. Sie eignen sich daher gut für 'transportables Werkzeug', das von den AnwenderInnen auf einer Webseite dorthin verschoben wird, wo es gebraucht wird. |
Die grundsätzliche Vorgangsweise:
♦ Mit Klick auf das Element (Fadenkreuz) wird das Ereignis onclick ausgelöst. ♦ Das Javascript-Programm drag_start speichert die aktuelle Position der Maus und des Elements (der zu bewegenden Schicht). Das ist notwendig, um später das Element genauso weit zu bewegen wie die Maus. ♦ Danach werden event-handler installiert: Das sind Javascript-Funktionen, welche ab sofort die beiden Ereignisse onMousemove (Maus-Bewegung) und onMouseUp (Maustaste losgelassen) überwachen. ♦ Wenn sie die Maus mit gedrückter Taste bewegen (drag), dann wird laufend die Maus-Position gemessen und das Element um den gleichen Betrag bewegt. ♦ Wenn sie die Maus-Taste loslassen, dann wird die Überwachung der events abgeschaltet, das Element bleibt an seinem Platz. |
||||
> Entwicklung
> CSS
> Schichten
|
