2. Fortgeschrittenes Positionieren
Wir wollen uns noch einmal die Ausgangsposition vor Augen führen: ein Dokument wird geladen und an einer durch den Dokument-Fluss erzeugten Stelle wollen wir einen Layer positionieren. (Beispiel: sogenannte Tooltips).
Die Vorgangsweise ist immer die selbe: wir plazieren im Dokument an der Stelle wo dann der Layer erscheinen soll ein Objekt, dessen Koordinaten wir nach dem Laden des Dokuments bestimmen, und die wir dazu verwenden die Lage des Layers festzulegen. Üblicherweise verwendet man Anker oder Bilder, da sich deren Position auch bei NS4 leicht bestimmen lässt.
Beispiel
Quellcode:
<html>
<head><title>Positionsbestimmung anhand eines Bildes</title>
<script language="javascript" src="js/moveDivTo.js" type="text/javascript"></script>
<script language="javascript" src="js/getPos.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
function moveHobbes()
{
leftStart=leftPos("ref1");leftEnd=leftPos("ref2");
topStart=topPos("ref1");topEnd=topPos("ref2");
moveDivTo("L1",(leftStart+leftEnd)/2-16,(topStart+topEnd)/2-16);
}
</script>
</head>
<body leftmargin=0 marginwidth=0 topmargin=0 marginheight=0>
<table border=0 cellspacing=0 cellpadding=0 width=80% height=80%>
<tr>
<td height="50%"> </td>
<td><a href="javascript:moveHobbes()">move hobbes to center of area</a><br></td>
</tr>
<tr>
<td height="50%" width=50%> </td>
<td bgcolor="#000000" align=left valign=top>
<img name="ref1" id="ref1" src="img/nix.gif" border=0 width=1 height=1><br>
</td>
</tr>
</table>
<table border=0 cellspacing=0 cellpadding=0 width=80% height=1>
<tr>
<td align=right>
<img name="ref2" id="ref2" src="img/nix.gif" border=0 width=1 height=1>
</td>
</tr>
</table>
<div style="position:absolute;left:70px;top:70px;" name="L1" id="L1">
<img src="img/hobbes.gif" border=0><br>
</div>
<script language="javascript" src="js/reArrange.js" type="text/javascript"></script>
</body>
</html>
|
Bei diesem Beispiel kann man die Fenstergröße beliebig ändern, das Bild wird immer die Mitte des schwarzen Bereichs finden. Diese Art der Positionierung erlaubt es Layer an Stellen im Text zu plazieren, unabhänging von der Schriftgröße, die auch von den Einstellungen des Browsers und vom Betriebssystem abhängt.
Die Funktionen leftPos und topPos im Detail:
function leftPos(refName)
{
ref=document.images[refName];
return (document.layers)? ref.x : getLeft(ref);
}
function topPos(refName)
{
ref=document.images[refName];
return (document.layers)? ref.y : getTop(ref);
}
|
Wie man sieht ist die Bestimmung der Position in Netscape 4 eine einfache Sache. Etwas komplizierter sieht es im IE aus, wo sich immer nur die Lage zum Eltern-Element bestimmen lässt. Darum summieren wir hier rekursiv über diese Abstände. Das selbe machen wir mit Mozilla, da sich dort die einzelnen Releases verschieden verhalten und diese Methode aber für alle das richtige liefert:
function getLeft(refObj)
{
xPos = refObj.offsetLeft;
parentObj=refObj.offsetParent;
while(parentObj != null) {xPos+=parentObj.offsetLeft;parentObj=parentObj.offsetParent}
return xPos;
}
function getTop(refObj)
{
yPos = refObj.offsetTop;
parentObj=refObj.offsetParent;
while(parentObj != null) {yPos+=parentObj.offsetTop;parentObj=parentObj.offsetParent}
return yPos;
}
|
Will man Tooltips über Links erscheinen lassen, so kann man sich das explizite Positionieren eines Objekts sparen, da sich die Position des Links bestimmen lässt. Man braucht dann die Lage des Tooltips nur noch relativ zum Link justieren. Oder, wie in diesem Beispiel hier, man bestimmt die Position des Mouseover-Events und lässt den Layer relativ zum Ort des Ereignisses erscheinen. Wie das genau geht wird in Kapitel 8 beschrieben.
|
