Overlay showing mouse cursor coordinates relative to an image when mouse cursor is over that image
<p>I'm trying to create a little overlay next to the mouse cursor that shows the coordinates of the cursor vs. the upper left corner of the image the mouse is on. I'm almost there: it kind of works, but there are still some problems.</p>

<ol>
<li><p>When I scroll (either with the mouse wheel or with the scroll bars on the side) the overlay and the cursor get far apart from each other: the overlay moves with the page and the cursor stays still relative to the monitor. I already tried "onscroll" but it does not work</p></li>
<li><p>I used "onmouseover" and "onmouseout" function for the images in the page, but for some reason they are only executed ONCE, when the page is loaded.</p></li>
<li><p>When I put the mouse on the upper left corner of the image, I'd like to see <code>0,0</code> as the coordinates. The X is actually 0, but the Y is actually -15. For some reason the coordinates of the image are 15 pixel below the upper edge. No idea why.</p></li>
</ol>

<p>OK, now that I mentioned the problems, here is my code:</p>

<p><strong>HTML</strong></p>

<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;

    &lt;head&gt;
        &lt;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"&gt;
        &lt;link href="main2008.css" rel="stylesheet" type="text/css"&gt;
        &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"&gt;&lt;/script&gt;
        &lt;script type="text/javascript" src="Ext/mcs2.js"&gt;&lt;/script&gt;&lt;/head&gt;
    &lt;/head&gt;

    &lt;body&gt;  
        &lt;div id="content"&gt;
            &lt;h1&gt;JS test&lt;/h1&gt;
            &lt;img src = "pic.jpg"&gt;
        &lt;/div&gt;
    &lt;/body&gt;

&lt;/html&gt;
</code></pre>

<p><strong>CSS</strong></p>

<pre class="lang-css prettyprint-override"><code>#xy {
    font-size:10px;
    position: absolute;
    top: 0px;
    right:0px;
    width:60px;
    visibility: visible;
    color:#006699;
    background-color:#ffffff;
    border: 1px solid #66ccff;
    z-index: 10;
    padding:7px;
}
</code></pre>

<p><strong>JS</strong></p>

<pre><code>var myX, myY, xyOn, myMouseX, myMouseY, ImgX, ImgY, Active;


//For each image, set onmouseover and onmouseout to the functions that activate and deactivate
$(document).ready(function() {
    $("img").each(function(i) {
        this.onmouseover = getcoordinates(this);
        this.onmouseout = deactivate(this);
    });
});

//Creation of new div is inside window.onload because it needs to be done when body already exists
  window.onload = function(){
    var divg = document.createElement("div");
    divg.setAttribute('id',"xy");
    divg.appendChild(document.createTextNode("New DIV"));
    document.body.appendChild(divg);  
  };

function getcoordinates(object) {
    ImgX=object.offsetLeft;
    ImgY=object.offsetTop;
    //document.getElementById('xy').style.visibility='visible';
    Active=1;
    alert("Acti"); //This pop-up is just for debugging
}   

function deactivate(object) {
    //document.getElementById('xy').style.visibility='hidden';
    alert("Deacti");  //This pop-up is just for debugging
    Active=0;
}   

document.onmousemove=getXYPosition;  //THIS IS THE KEY FUNCTION!!! And it works
window.onscroll=getXYPosition;    //I tried this to fix the scrolling problem, but it does not work

// Cursor coordinate function

    xyOn = true;
    function getXYPosition(e){
        if (1==1) {    //Instead of "1==1" I had written "Active==1", but it does not work at all
            myMouseX=(e||event).clientX-ImgX;
            myMouseY=(e||event).clientY-ImgY;
            if (myMouseX + 100 &gt; document.documentElement.clientWidth) {
                myX = myMouseX - (myMouseX + 80 - (document.documentElement.clientWidth));
            } else {
                myX = myMouseX + 20;    
            }
            if (myMouseY + 64 &gt; document.documentElement.clientHeight) {
                myY = myMouseY - (myMouseY + 44 - (document.documentElement.clientHeight));
            } else {
                myY = myMouseY + 20;    
            }
            if (document.documentElement.scrollTop &gt; 0) {
                myY = myY + document.documentElement.scrollTop;
                myMouseY = myMouseY + document.documentElement.scrollTop;
            }
            document.getElementById('xy').style.top = myY + "px";
            document.getElementById('xy').style.left = myX + "px";
            document.getElementById('xy').innerHTML = "X is " + myMouseX + "&lt;br /&gt;Y is " + myMouseY;
            document.getElementById('xy').innerHTML = document.getElementById('xy').innerHTML;
            if (xyOn) {
                document.getElementById('xy').style.visibility = "visible";
            } else {
                document.getElementById('xy').style.visibility = "hidden";
            }
        }
    }
</code></pre>

<p>PS: In case you're wondering why I add the overlay div and set the properties with JS rather than HTML, the reason is that when I manage to make the JS code at some point this will become a Chrome extension, which means I can inject JS and CSS into the page, but no HTML.</p>
