DHTML Lab - DHTML Diner - IE4: Element Page Coordinates (2) | WebReference

DHTML Lab - DHTML Diner - IE4: Element Page Coordinates (2)

DHTML Diner Logo

This is an Internet Explorer 4 technique. The in-page examples will only work in Explorer 4 Windows and Explorer 4 Macintosh.


WebReference logo

Determining Element Page Coordinates (2)

Consider the image (WebReference logo) in the left column. The HTML that the image resides in is:

<HTML>
...
<BODY>
<CENTER>
...
<TABLE>
...
<TR>
<TD>
...
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=10
       STYLE="margin-left:10;">
  <TR><TD BGCOLOR=white ALIGN=CENTER
          STYLE="border:1px solid green">
    <FONT SIZE=-1>
      <P><B>
        <IMG ID="imWR" SRC="wrlogo.gif"
                WIDTH=106 HEIGHT=60 BORDER=1>
          <BR>WebReference logo
      </B></P>
    </FONT>
  </TD></TR>
</TABLE>
...
...
</TD>
</TR>
</TABLE>
...
</CENTER>
</BODY>
</HTML>

Use the three buttons below to learn more about the image's parent elements and position. The Parent Elements button causes a list of parent elements to be displayed. Offset Parents will display the hierarchy of elements that redefine the coordinate system. Finally, Position Specs displays the values of offsetLeft and offsetTop for all the offset parents, adding them up to produce values that reflect the page position of the image.

  

Let's repeat this example with a positioned element.



Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: May 18, 1998
Revised: May 18, 1998

URL: https://www.webreference.com/dhtml/diner/realpos/realpos2.html