Reg Exp
Web Design
Notes Client
Capturing Mouse Position
If you want to capture the mouse position as it moves around the screen, then include this function in your web page.

You will want to put this code into the JS Header section of your form. We put the code into a JavaScript page (a page design element named with a .js extension) and then include it in the head section of our form.

You will have global variables of xMousePos and yMousePos that will give you the proper position of the mouse, no matter how much the user has scrolled. Something can appear at the mouse's position using those variables. So, the mouseover event of a link could have something appear below the user's current position on the page. You do not need to make any additional calls during the mouseover event because xMousePos and yMousePos are constantly being captured.

The variables xMousePosMax and yMousePosMax will have the height and width of the page in relation to the position of the mouse. So if you want to have something appear that is 60 pixels tall, you can compare xMousePos to xMousePosMax to see if there is 60 pixels of room for the item to fit below.

Below is the actual JavaScript code:
// Set Netscape up to run the "captureMousePosition" function whenever
// the mouse is moved. For Internet Explorer and Netscape 6, you can capture
// the movement a little easier.
if (document.layers) { // Netscape
    document.onmousemove = captureMousePosition;
} else if (document.all) { // Internet Explorer
    document.onmousemove = captureMousePosition;
} else if (document.getElementById) { // Netcsape 6
    document.onmousemove = captureMousePosition;
// Global variables
xMousePos = 0; // Horizontal position of the mouse on the screen
yMousePos = 0; // Vertical position of the mouse on the screen
xMousePosMax = 0; // Width of the page
yMousePosMax = 0; // Height of the page

function captureMousePosition(e) {
    if (document.layers) {
        // When the page scrolls in Netscape, the event's mouse position
        // reflects the absolute position on the screen. innerHight/Width
        // is the position from the top/left of the screen that the user is
        // looking at. pageX/YOffset is the amount that the user has
        // scrolled into the page. So the values will be in relation to
        // each other as the total offsets into the page, no matter if
        // the user has scrolled or not.
        xMousePos = e.pageX;
        yMousePos = e.pageY;
        xMousePosMax = window.innerWidth+window.pageXOffset;
        yMousePosMax = window.innerHeight+window.pageYOffset;
    } else if (document.all) {
        // When the page scrolls in IE, the event's mouse position
        // reflects the position from the top/left of the screen the
        // user is looking at. scrollLeft/Top is the amount the user
        // has scrolled into the page. clientWidth/Height is the height/
        // width of the current page the user is looking at. So, to be
        // consistent with Netscape (above), add the scroll offsets to
        // both so we end up with an absolute value on the page, no
        // matter if the user has scrolled or not.
        xMousePos = window.event.x+document.body.scrollLeft;
        yMousePos = window.event.y+document.body.scrollTop;
        xMousePosMax = document.body.clientWidth+document.body.scrollLeft;
        yMousePosMax = document.body.clientHeight+document.body.scrollTop;
    } else if (document.getElementById) {
        // Netscape 6 behaves the same as Netscape 4 in this regard
        xMousePos = e.pageX;
        yMousePos = e.pageY;
        xMousePosMax = window.innerWidth+window.pageXOffset;
        yMousePosMax = window.innerHeight+window.pageYOffset;

If you want to see this really work, then at the very bottom of the "captureMousePosition" function, put in a call to put the current values in the status bar. So, the line would read something like:
window.status = "xMousePos=" + xMousePos + ", yMousePos=" + yMousePos + ", xMousePosMax=" + xMousePosMax + ", yMousePosMax=" + yMousePosMax;

In fact, that is what this page is doing when you are not over another link - as you move around the page, the values change in the status bar and you can see what affect scrolling has on the values (especially the "yMousePosMax" value).