| home / experts / dhtml / diner / realpos |   
|
This is an Internet Explorer 4 technique. The in-page examples will only work in Explorer 4 Windows and Explorer 4 Macintosh.
|
 |
Determining Element Page Coordinates (3)The WebReference logo appears in the left column once again, only this time it is contained in a draggable positioned element. This element is nested in another draggable positioned element. The HTML hierarchy for the positioned element is: <HTML>
...
<BODY>
...
<DIV ID="elDinerDad"
STYLE="position:absolute;visibility:hidden;">
...
<SPAN ID="elDiner"
STYLE="position:absolute;left:30;top:125">
<TABLE ALIGN=LEFT>
<TR>
<TD>
<IMG ID="imWR" SRC="wrlogo.gif"
WIDTH=106 HEIGHT=60 BORDER=1 HSPACE=0>
</TD>
...
</TR>
</TABLE>
...
</SPAN>
</DIV>
...
</BODY>
</HTML>
The outer element, elDinerDad, has no original position values since it is placed by the script into the correct position in the left column. The inner element has two buttons. The Show Specs button will display the parent elements, the offset parents and the positioning properties necessary for determining the image's position on the page. Drag the elements, either singly or together, and click the Recalc button. The specs will reflect the new image page position. Notice that the offset parents of the image are regular HTML table elements, until the SPAN (positioned element) is reached going up the hierarchy. We then enter coordinate systems defined by positioned elements, which in turn are positioned within the BODY. And...how did we drag the elements? Answer in column 7, Drag & Drop in Explorer 4 Now, let's create simple functions that will perform the calculations for us! |
Produced by Peter Belesis and
All Rights Reserved. Legal Notices.
Created: May 18, 1998
Revised: May 18, 1998
URL: http://www.webreference.com/dhtml/diner/realpos/realpos3.html
