Source code for Mouse Offset Lab

<HTML>
<HEAD>
<TITLE>IE Mouse Event Offsets</TITLE>
<SCRIPT LANGUAGE="JavaScript">
// demonstration for IE4 or later only
function showCoords() {
     // create flag for IE/Mac
     var isMac = navigator.userAgent.indexOf("Mac") != -1
     // create shortcut reference to form object
     var form = document.forms[0]
     // show tag of element receiving mouse event
     form.srcElemTag.value = "<" + event.srcElement.tagName + ">"
     // show uncorrected offset events
     form.rawCoords.value = event.offsetX + "," + event.offsetY
     // calculate window scrolling correction for IE/Mac
     var leftCoord = event.offsetX + ((isMac) ? document.body.scrollLeft : 0)
     var topCoord  = event.offsetY + ((isMac) ? document.body.scrollTop  : 0)
     // show corrected offset events
     form.correctedCoords.value = leftCoord + "," + topCoord
}

// display scroll values dynamically in statusbar
function showScroll() {
     status = "Body scroll (x,y): " + document.body.scrollLeft + ", " + document.body.scrollTop
}

// set click event handler
document.onclick=showCoords
</SCRIPT>
</HEAD>
<BODY STYLE="position:relative; width:800px; height:800px" onScroll="showScroll()">
<H1>IE Mouse Event Offsets</H1>
<HR>
<P>Click near the top-left corner of any element to view the event coordinates inside the element's rectangle. 
Scroll the browser window to observe how Mac event offsets need correction to compensate for body scrolling.
<FORM>
<TABLE CELLPADDING=5 BORDER=1>
<TR>
     <TD ALIGN="right" BGCOLOR="#FFFFCC">Element receiving click:</TD>
     <TD BGCOLOR="#FFFFCC"><INPUT TYPE="text" NAME="srcElemTag" SIZE=15></TD>
</TR>
<TR>
     <TD ALIGN="right" BGCOLOR="#FFCCFF">Uncorrected Event Offsets (x,y):</TD>
     <TD BGCOLOR="#FFCCFF"><INPUT TYPE="text" NAME="rawCoords" SIZE=15></TD>
</TR>
<TR>
     <TD ALIGN="right" BGCOLOR="#CCFFFF">Corrected Event Offsets (x,y):</TD>
     <TD BGCOLOR="#CCFFFF"><INPUT TYPE="text" NAME="correctedCoords" SIZE=15></TD>
</TR>
<TR>
     <TD ALIGN="center"><INPUT TYPE="button" VALUE="Sample Button"></TD>
     <TD ALIGN="center"><INPUT TYPE="checkbox">A Sample Checkbox</TD>
</TR>
</TABLE>
</FORM>
<DIV STYLE="position:absolute; top:800; left:800; visibility:hidden">Scroll Forcer</DIV>
</BODY>
</HTML>