画像上でクリックした位置を取得する。

javascript


どうしてもこんな事って忘れてしまうので、メモモメメモモメ。


HTMLにはこう書きます。

<script type="text/javascript" 	src="js/jquery1.4.4.js"			></script>
<script type="text/javascript" 	src="js/jquery.dimensions.min.js"	></script>


<img id="hoge" src="hoge-img-url" onclick="getXY(event)" />

x:<span id="pos_x">0</span>  y:<span id="pos_y">0</span>


javascriptはこう書きます。


function getXY(e) {
    x = e.pageX - $("#hoge").offset()["left"];
    y = e.pageY - $("#hoge").offset()["top"];
    $("#pos_x").text(x);
    $("#pos_y").text(y);
}


「jquery.dimensions」はここで取得。
http://plugins.jquery.com/project/dimensions


おぉー
取れた採れた獲れた。