国民宿舎はらぺこ 大浴場

テスト用サンプル。タイトルがなんかおかしいのは気にするな。

event.clientX や event.clientY は、ブラウザウィンドウを基準とした座標値を返すため、ページがスクロールされている場合には、ブロック要素領域内の座標値と照合することができなくなる。特に、スタイルシートの position: fixed; が使えない IE6.0 ではこれがいろいろとネックになる。

Firefox、Opera などでは event.pageX と event.pageY が使える。ブロック要素の offsetLeft、offsetTop を階層的に参照すれば、ブロック要素内の座標値として照合が可能になる。

問題は、IE では event.pageX や event.pageY が使えないと言うこと。代わりに、event.x や event.y が使えそうだが、一番上位の箱 (サンプルでは水色の箱) が基準となり、それより下位階層の箱でも、最上位階層の箱と同じ値が取れてしまう。これを分かっていてページ自体と同時に実装する場合には問題ないと思うんだけど、例えばブログパーツみたいに、既存のページに組み込んで使うものを作る場合には、どこが基準になるのか分からなくなってしまって問題になりそうな気がする。