マウスポインタ座標表示(その3)

Internet Explorer で、画像領域の座標はオフセット値が表示されてしまう不都合(都合よい場合もあるが)を修正してみましょう。
( Netscape では問題ありません。)

onmousemoveイベント発生時の座標取得は・・・

    X = event.offsetX;  Y = event.offsetY;

となっていました。
これが、問題の不具合を発生させているのです。
このほかにもイベント発生時に座標取得ができそうなプロパティ名を探してみました。

clientX;  clientY;
layerX;  layerY;
pageX;  pageY; (Netscapeではこちらを使用)
screenX;  screenY;

などがあり、いろいろ実験しました。

その結果、この中ではclientが使えそうです。

    X = event.clientX;  Y = event.clientY;

として組み込んで実行してみました。
今度は、画像内でもページ座標が表示され、不具合は解消されたようです。

    X = event.x;  Y = event.y;

としてもよさそうです。こっちの方が、すっきりしていいか?!

・・・が、しかしスクロールが必要な大きなページでは、両方とも正常に動作してくれません。
どうも、ページ内の座標ではなくWindowの内側の座標のようです。
困って参考書を眺めていたら、

document.body.scrollLeft
document.body.scrollTop

という、スクロール値を示すプロパティが見つかりました。
試しに・・・

    X = event.x + document.body.scrollLeft;
    Y = event.y + document.body.scrollTop;

と、スクロール値を加算してみるとバッチリです。

やれやれ・・・と思っていたら、原点位置で表示された座標値が(2,2)になっていました。
私のブラウザは Internet Explorer 6.0 ですが、他の Internet Explorer でも同じでしょうか?
とりあえず・・・

    X = event.x + document.body.scrollLeft - 2;
    Y = event.y + document.body.scrollTop - 2;

として、不具合がクリアされたようです。
ふぅ〜、疲れたぁ〜。

スクリプトファイル(mouse_xy3.js)のダウンロード


不具合解消テスト

このページは改良されていますので、下の画像でテストしてください。
バッチリOKでしょう!!

テスト画像

なお、Internet Explorer 専用版のスクリプトファイル(mouse_xy.js)も同様に変更すれば良いでしょう。
各自で修正してください。