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

Netscape でも動作する座標表示のスクリプトを作りました。

Internet Explorer 4.0 以降、および Netscape 4.0 以降でブラウズできます。
ただし Netscape 4.X では、マウスカーソルをクロスヘアラインに変更できません。
スクリプトの説明は省略します。ダウンロードして参照してください。

このスクリプトを使用するには、次のようにhead領域内のいずれかにスクリプトファイルを読み込む記述を1行追加します。
bodyタグには、DOM要素を識別するためのIDと、マウスカーソルを変更するためのonLoadイベントのスクリプトも追記してください。

なお、座標を表示させようとするHTMLファイルと同じホルダにマウスポインタ座標表示スクリプトファイル(mouse_xy2.js)があるものとします。

<head>
・・・
<script language="javascript" src="mouse_xy2.js"></script>
</head>

<body id="mouseXY" onLoad="setCur()">
・・・
</body>

Netscape 7.0 でブラウズしてみたのですが、ページ周囲の余白にマウスポインタが移動すると、カーソルがデフォルトの矢印に戻ってしまいます。
Internet Explorer 6.0 ではそのようなことはありません。ブラウザによって少々異なるのは、しかたが無いですね。

ここではbodyタグのidを参照してマウスカーソルを切り替えていますが、divタグなどでページの一部分を区切ってidを振れば、この範囲にマウスポインタが入ったときのみ、カーソルが切り替わるようにできます。

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


ここで問題が・・・

Internet Explorer と Netscape での動作の違いを発見しました。
Internet Explorer で、下のテスト画像(赤い枠)の中にマウスポインタを移動してください。
Netscape ではページ中の座標値を示しますが、Internet Explorer では、画像内の座標値になりませんか。
赤枠の左上付近にマウスポインタを移動するとよく分かります。
だから offsetX, offsetY なのかぁ〜???

テスト画像

画像内の座標を知りたい場合もありますが、私は画像の位置を知りたいので、これでは不便です。
そこでこちらでこの問題を解決する方法を探ってみました。