query co-ordinates
<p>Hi I've got a DIV that holds a sprite that has around 40 emoticons on it. Its 200px * 100px and each emoticons is around 25*25px.</p>

<p>I want to be able to use a mouse over to explain each emoticon - eg: ':) smile'.</p>

<p><img src="http://i.stack.imgur.com/DygVC.png" alt="this one"></p>

<p>I've been advised to use this code for co-ordinates:</p>

<pre><code>$("#div").mousemove(function(e)
{
    var x = e.pageX - this.offsetLeft;
    var y = e.pageY - this.offsetTop;
});
</code></pre>

<p>and this works great - it shows the mouse position very well - very happy with this.</p>

<p>I'm unsure how to alter this code so that I can pin point areas....</p>

<p>I've tried:</p>

<pre><code>$("#div").mousemove(function(e)
{
    var x = e.pageX - this.offsetLeft;
    var y = e.pageY - this.offsetTop;

    if(x &lt; 1 &amp;&amp; x &gt; 25) &amp;&amp; (y &lt; 1 &amp;&amp; y &gt; 25) {
        alert('captured mouse over');
    }
});
</code></pre>

<p>but this doesn't work - how can I capture specific area events?</p>

<p>thx</p>
