DHTML: Ebenen positionieren

Die Positionierung der Ebene erfolgt entweder relativ oder absolut. Absolut geht von einer Positionierung von linken oberen Rand aus (Werte sind dann 0 ) und die relative Positionierung hängt von der aktuellen Position ab.

Bei der absoluten Positionsänderung wird der Ebene einfach ein neuer Wert zugeordnet. Die Zuordnung erfolgt mit einem kleinen Javaskript :

function div_absolut(ebene){
ebene.top=200;
ebene.left=100;
}

Mit ebene.top wird der Abstand der Ebene vom oberen Rand der Wert (200 Pixel) neu definiert. Und mit ebene.left geschieht dies für die Positionierung vom linken Bildrand (100 Pixel).

Die relative Positionierung geschieht in Abhängigkeit von der ursprünglichen Position und es wird einfach der Wert, der der Funktion übergeben wurden, dazuaddiert.

function position(ebene,x,y){
ebene.toppos=parseInt(ebene.top);
ebene.leftpos=parseInt(ebene.left);
ebene.toppos+=x;
ebene.leftpos+=y;
ebene.top=ebene.toppos;
ebene.left=ebene.leftpos;
}

Und der Aufruf erfolgt durch einen einfachen Link auf die Funktion :

<a href="javascript:position(objekt,30,10)">verschieben</a>

Im Beispiel wird die Position vom linken Rand um 10 (y) verändert und für den oberen Rand um 30 (x).

Da der Internet Explorer als Wert für ebene.top einen Anhang mitliefert (z.B.:100px) und dazu muß mit parseInt zuvor dieser Anhang abgeschnitten werden damit nur der reine Zahlenwert genutzt wird.

DEMO l DHTML-Workshop l Weiter