How to get the coordinates in html using .hover event in jquery?
<p>Can everybody help me on how to create a tooltip that contain the x y coordinates? Here is my sample code:</p>

<pre><code>    &lt;style type="text/css"&gt;
        a img {
            border: 3px solid blue;
        }

        #largeImage {
            position: absolute;
            padding: .5em;
            background: #e3e3e3;
            border: 1px solid #bfbfbf;
        }
    &lt;/style&gt;

    &lt;script type="text/javascript"&gt;
        $(function() {
            var offsetX = 20;
            var offsetY = 10;

            $('a').hover(function(e) {
                var href = $(this).attr('href');

                var x = e.pageX - this.offsetLeft;
                var y = e.pageY - this.offsetTop;

                $('&lt;div id="largeImage"&gt;' + 'X: ' + x + ' Y: ' + y + '&lt;/div&gt;')
                .css('top', e.pageY + offsetY)
                .css('left', e.pageX + offsetX)
                .appendTo('body');
            }, function() {
                $('#largeImage').remove();
            });

            $('a').mousemove(function(e) {
                $('#largeImage')
                .css('top', e.pageY + offsetY)
                .css('left', e.pageX + offsetX);
            });
        });
    &lt;/script&gt;

&lt;body&gt;
    &lt;a href="Images/FredLarge.jpg"&gt;
        &lt;img src="Images/FredSmall.jpg" alt="squidward" /&gt;
    &lt;/a&gt;
&lt;/body&gt;
</code></pre>

<p>What happened in this example is that the coordinates aren't changing. Although it gets the coordinates but it doesn't change. </p>

<p>*This code is actually like a tooltip of image, so just ignore the id name.</p>
