How to get mousedown offset relative to an img target element?
<p>I have a <code>mousedown</code> event handler on an <code>img</code> element:</p>

<pre><code>$('#some_image').bind({
    mousedown: function(e) {
        var img = e.target;
        var relpos = ???;
    }
  })
</code></pre>

<p>How can I get the location of the <code>mousedown</code> <em>relative to</em> <code>img</code>?  Relative, that is, to any one of <code>img</code>'s corners, whichever is easiest.</p>

<p>FWIW, I'm using jQuery.</p>

<p>(Sorry for the dumb question.  I imagine the answer must be trivial, but I can't find it, and it's driving me insane...)</p>

<p>EDIT: OK, here's the answer:</p>

<pre><code>$('#some_image').bind({
    mousedown: function(e) {
        var offset = $(this).offset();
        var relpos = [e.pageX - offset.left, e.pageY - offset.top];
        // etc.
    }
  })
</code></pre>

<p>Actually, I found that for what I'm doing it's better to subtract <code>Math.round(offset.left)</code> and <code>Math.round(offset.top)</code> rather than the raw offsets, since the latter are not always integers (go figure).</p>

<p>BTW, at least according to Firebug, the event's <code>offsetX</code> and <code>offsetY</code> are undefined, and <code>layerX</code> and <code>layerY</code> are not even listed among its members.</p>
