title: How to get mousedown offset relative to an img target element?
body: <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>