ピクセル・メジャー

マウスポインタの座標を取得する方法が理解できたところで、その応用としてページ内の寸法を測るメジャーを作りました。「ピクセルメジャー」と名付けました。
Internet Explorer 4.0 以降、あるいは Netscape Navigator 6.0 以降で動作します。

使用方法：

XY座標 図のように、マウスクリックでXY1、XY2の座標を取得します。
タイトルバーには、XY1の座標がXY1=(999,999)のように表示されます。
マウスカーソルを測定したい1点に移動してクリックすると、XY1の座標が取得されます。
そのとき、タイトルバーにはXY2の座標が表示されます。
次に測定したい点にマウスカーソルを移動してクリックすると、XY2の座標が取得され、測定結果がアラートウィンドウに表示されます。

測定内容は・・・
１．XY1の座標値
２．XY2の座標値
３．XY1とXY2の水平方向の間隔(dX)
４．XY1とXY2の垂直方向の間隔(dY)
５．XY1とXY2を対角とする長方形の面積
６．XY1とXY2を対角とする長方形の対角線の距離
７．対角線の水平軸からの角度
・・・が表示されます。
なお、アラートウィンドウのOKボタンをクリックすると、再びXY1の座標取得から実行できます。

問題点が一つ・・・
スクロールバー上のクリックも有効です。
したがって、スクロールさせようとしてスクロールバーをクリックするとその座標を取得してしまい、思わぬ結果となってしまいます。
申し訳ありませんが、スクロールさせて測定するときは、矢印キーでスクロールするか、マウスのホイールでスクロールしてください。
どなたか良き解決策をご教示ください。

ピクセル・メジャーの組み込み方：

ピクセルメジャーは、製作中のHTMLファイルに簡単に組み込めます。
スクリプトファイル（measure.js）をダウンロードして、組み込むHTMLファイルと同じディレクトリに置いてください。
組み込み方は・・・ 
<head>
・・・
<script language="javascript" src="measure.js"></script>
</head>

<body id="mouseXY" onLoad="setCur()">
・・・
</body>
のように、編集するHTMLファイルに赤字の部分を追加してください。
ページが完成して、ピクセルメジャーの任務が完了したら、赤字部を削除するだけです。

スクリプトファイル（measure.js）のダウンロード