Dropbox

モバイル以外のプログラミングについて書くのは初めてかも。

簡単だと思って始めたらハマってしまうのはプログラミングには、よく有ることですがwebプログラミングでは、その可能性が高くなります。ドキュメントで良く分からない場合は、Google先生に頼れば実例が見つかるものですがwebプログラミングの場合、その検索結果を見ても混沌とした状況に陥る場合があります。今回は、その一例です。備忘録として書き残しておきます。

webページの中にイメージ等を表示して、その中をクリックしたりマウスを動かしたりしたときに、そのマウスの位置をイメージ内部の相対的な座標として得る方法です。マウスをクリックしたり動かした時のイベントをjavascriptで得る場合IEを除いては要素内では無く、ウインドウなどを基準とした座標が返って来ます。ただしwebブラウザーによって扱いが様々なのが現状です。

では、イメージなどの要素の位置が得られれば、イベントで得られたマウスの位置との差分を取れば目的は達成できる訳ですが、要素=オブジェクトが複雑にweb画面上に構成されていると生のjavascriptだとかなり面倒なコーディングが必要となります。

こういった事をなるべく簡単に処理するために幾つかのjavascriptライブラリが公開されています。その一つであるjQueryを使用したところ、かなり簡単に処理することができました。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('img#test').click(function(e){
var x = e.pageX - $('img#test').position().left;
var y = e.pageY - $('img#test').position().top;
alert("X=" + x + " Y=" + y);
});
});
</script>

上のようなコードがヘッダー部分にあったとして<img id="test"で始まるイメージの内部をクリックするとイメージ内部の相対的な座標が表示されます。

Trackback

no comment untill now

Add your comment now