Mouse cursor coordinates over an image: Y coordinate is not integer! How can it be?
<p>Thanks to suggestions I received <a href="http://stackoverflow.com/questions/11245250/mouse-cursor-coordinates-over-image-br-not-working">here</a>, I fixed some problems with my code and now I have:</p>

<pre><code>window.onload = function(){

    var tooltip = $( '&lt;div id="tooltip"&gt;' ).appendTo( 'body' )[0];

$( 'img' ).
    each(function () {
        var pos = $( this ).position(),
            top = pos.top,
            left = pos.left,
            width = $( this ).width(),
            height = $( this ).height(); 
        $( this ).
            mousemove(function ( e ) {
                var x = e.pageX - left,
                    y = e.pageY - top;

                $( tooltip ).html( 'x = ' + x + '&lt;br/&gt;y = ' + y ).css({
                    left: e.clientX + 10,
                    top: e.clientY + 10
                }).show();
            }).
            mouseleave(function () {
                $( tooltip ).hide();
            }); 

    });

};
</code></pre>

<p>Unfortunately, the Y coordinate is not an integer number! See the picture:</p>

<p><img src="http://i.stack.imgur.com/64hub.png" alt="enter image description here"></p>

<p>The difference vs. what it should be is constant: -0.42. It varies from -0.42 on the upper edge of the photo to 1198.58 at the lower edge. (picture height is 1200).</p>

<p>I could definitely round it up and solve the problem, but it's not a clean solution. I'd like to get it right from the beginning.</p>

<p>This is the CSS:</p>

<pre><code>body { font:13px/1.4 Arial, sans-serif; margin:50px; background:gray; }
#tooltip { text-align:left; background:black; color:white; padding:3px 0; position:fixed; display:none; white-space:nowrap; }
</code></pre>

<p>And this is the HTML:</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="style.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="javascript.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 class="coords" src = "pic.jpg"&gt;

&lt;p&gt;Paragraph between images&lt;/p&gt;


&lt;img class="coords" src = "pic.jpg"&gt;
&lt;/div&gt;

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

<p>Thanks a lot for your help!</p>

<p>Davide</p>
