jQueryでマウス位置の取得
2010/11/23 | JavaScript/Ajax
画面上でマウスカーソルをあわせると、小さなポップアップで簡単な説明を表示させるようなインターフェイスは結構受けがいい。こういうインターフェイスは「tooltip」というらしい。jQueryではこれを実現するためのプラグインが多数存在する。今回案件でイメージマップを作成し、その中のリンク要素に対してポップアップで見出しをつけることを提案した。しかしこれ、意外に難しくて、普通のプラグインでは対応できなかった。なぜなら表示される要素（<img>）とリンクを記述する要素（<map>）がそもそも別の場所に記述されているからだ。リンクが記述されている<map>内の<area>タグでtooltipを表示するよう記述してみたけど、思った場所に表示されなかった。自前で実装するしかない。
ここでjQueryでマウス位置を取得する必要がある。リンクエリアの入った瞬間のHTMLの左上隅からの座標を取得することさえ出来れば、そこに絶対位置指定でポップアップを表示させればいいからだ。しかしこれも単純にはいかなかったので、少し変化球で勝負してみた。
- マウス位置は常に取得して特定の変数に格納し続ける（マウスが動いている間は絶えず）。
- 特定のエリアに入ったときに、上記で格納している変数の値を読み取る。
特定のエリアに入ったときにマウスカーソルの位置を直接取得するのではなく、マウスカーソルの位置座標は常に変数に格納しておき、特定のエリアに入った時だけ変数を呼び出すような手法をとった（間接的）。これでうまく位置座標が取得できた。jQueryで記述するとこんな感じ。
var X,Y;
$(document).ready(function(){
$(‘html’).mouseover(function(ev){
X=ev.pageX;
Y=ev.pageY;
});
});
これで常にXとYにマウス位置が格納されているので、イベントに応じてそれらの変数値を読み取ればいい。
