画像上でクリックした座標の値を取得する【CakePHP jQuery】

ページ上に表示した画像のクリックした部分の座標を取得する方法です

【環境】
・CakePHP2.5
・jquery-1.10.1

まずはビューの説明から
ビューには画像を表示させるのと、取得した座標を入力するフォームを作成します

<?php echo $this->Html->image('画像名', array('id' => 'image', 'alt' => '画像名')); ?>
<?php echo $this->Form->create(false, array('type' => 'post', 'action' => '遷移先のページ')); ?>
<fieldset>
<?php echo $this->Form->input('dimension.x', array('id' => 'pos_x')); ?>
<?php echo $this->Form->input('dimension.y', array('id' => 'pos_y')); ?>
</fieldset>
<?php
        $options = array('label' => '登録');
        echo $this->Form->end($options);
?>

最初にidをimageで画像を表示させています
２行目からはフォームを作成しており、xの値を格納するinputにはidとしてpos_xを、同様にyの値を格納するinputにはidとしてpos_yを振っています
postされた際には['dimension']['x']にxの値が格納されるという風にしています

次にjqueryの説明です
この部分は以下のブログを参考にさせて頂きました
http://piro-suke.hatenablog.com/entry/20070726/1185435069
http://piro-suke.hatenablog.com/entry/20070726/1185435069

$(function() {
    $('#image').on("click", 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"];
        }
        $('input#pos_x').val(rel_x);
        $('input#pos_y').val(rel_y);
    });
});

コードの説明自体はブログの方を見て頂ければ良いのですが、自分の知識不足で$('input#pos_x').text(rel_x)としてしまっていて、取得した値がフォーム内に表示されないことに悩まされました
きちんと$('input#pos_x').val(rel_x)としてください
http://webhako.net/jquery/textbox-set-value/

以上が、画像上のクリックした座標を取得する方法でした