jQueryで画像上にあるマウス位置の座標を取得する

画面に対する絶対的な座標の取得方法はすぐ見つかったが、
画像の左上を基点とする座標を取得する方法を見つけるのに手間取ったのでメモ。

マウス座標の取得方法には色々ある（offsetXやらlayerXやら）ようだが、
ブラウザによって取得できる値が異なるみたい。IEの場合はoffsetX、offsetYで
指定した要素の座標を取得できるようだが、Firefoxでは画面に対する座標しか
取得する方法が見つからなかった。

jQueryのプラグインで、Dimensionsというのを使うと取得できた。
http://jquery.com/plugins/project/dimensions

指定したエレメントの幅や高さ、相対的、絶対的な位置を取得することができる。

<script type="text/javascript" src="/static/javascripts/jquery-1.1.3.1.js"></script>
<script type="text/javascript" src="/static/javascripts/jquery.dimensions.js"></script>
<script type="text/javascript">
  <!--//
      var rel_x, rel_y;
      $(function() {
          $("#image").mousemove(function(e) {
              if (document.all) {
                      rel_x = e.offsetX;
                      rel_y = e.offsetY;
              } else {
                      rel_x = e.pageX - $("#image").offset()["left"];
                      rel_y = e.pageY - $("#image").offset()["top"];
              }
              $("#crop_x").val(rel_x);
              $("#crop_y").val(rel_y);
          });
      });
      //-->
</script>
<div id="imageContainer">
<img id="image" src="{{ photo.get_image_url }}" />
</div>
<div>
<div>x:<input type="text" id="crop_x" /></div>
<div>y:<input type="text" id="crop_y" /></div>
</div>