jQueryを利用してwebページ要素内の座標を得る方法
モバイル以外のプログラミングについて書くのは初めてかも。
簡単だと思って始めたらハマってしまうのはプログラミングには、よく有ることですが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"で始まるイメージの内部をクリックするとイメージ内部の相対的な座標が表示されます。
Nokia S60デバイス向けのGoogle Mapsアプリに中国版があるのは何度も紹介してきました。機能的には、国際版(アメリカ版?)を何時も後追いで追従している感じです。後は、その時々によって違うのですが地図そのものも取ってきている所が違っているようです。初期の頃は中国版だと中国簡体字表記、国際版だと英字表記の地図で何となく棲み分けが出来ていました。
)、地図データが変わっていました。文字が読みやすいし情報も豊富です。これで国際版にあるLatitude機能があれば中国版を常用するのになぁ。残念。
