title: Get accurate position for a click on a linked image using jquery
body: <p>I'm  working on an app that allows tagging directly on photos via clicking (like Facebook, flickr, et al).  However, I can't seem to register the right coordinates for a click on a photo.  The problem is the x coordinates seem to be absolute x distance of a click within the browser window(rather than within the photo), while the y coordinates are often negative or incredibly small (negative near the top, small near the bottom).  These are the values I get when clicking near the top left corner (which should register as being at or near 0: "x"=>"219", "y"=>"-311"... 219 seems about right when measuring the distance from the left side of the browser window, but the distance should be within the photo area)</p>
  
  <p>I'm currently capturing click events and coordinates on a photo using a regular link (the link contains other relevant photo data) and doing the math (same calculations used in the jquery docs) before passing it along to my rails app. I doubt the method has much to do with the erroneous values, though I suspect the math or some css quirk could be at fault. In either case, I'm absolutely boggled.</p>
  
  <p>JS:</p>
  
  <pre><code>$(document).ready(function(){
  clickTag();
  </code></pre>
  
  <p>});</p>
  
  <pre><code>function clickTag(){
     $("#taggable").click(function(e){
          var x = e.pageX - this.offsetLeft;
          var y = e.pageY - this.offsetTop;
          var url = $(this).attr("href");
          courl = url + '&amp;x=' + x + '&amp;y=' + y;
        $.ajax({
          type:"GET",
          url: courl,
          dataType:"script"
          });
          return false;
     }); 
  }
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>`&lt;div class="content"&gt;
      &lt;div id="image_container" style="position:relative;width:405px;float:left;height:600px;&gt;
          &lt;a href="/tags/new_xy?look_id=188&amp;amp;photo_id=1150" id="taggable" style="position:relative;top:0;left:0px;"&gt;&lt;img alt="taggable_image" src="taggable_image.jpg" /&gt;&lt;/a&gt;
      &lt;div class="tags" id="tags"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;`
  </code></pre>