k014
マウスカーソルの位置を検出して座標表示する
Copyright(C) 2004 web工房 All Rights Reserved
action
|
マウスの位置を検出し、そのXY座標を表示します。 Xe,Ye : ウィンドウ内のカーソル座標(px) Xs,Ys : スクロール量(px) X=Xs+Xe : htnlファイル上のX座標(px) Y=Ys+Ye : htnlファイル上のY座標(px) ※座標表示は、マウスカーソルに追従させている他、詳細をウィンドウ右上に固定して表示しています。 |
|
web技
◆手順1【座標を表示するエリアの設置】
※<div>〜</div>を用いて座標を表示しますが、最初は何も記述しません
(座標は、手順3のスクリプトでinnerTextを用いて表示されます)
※style属性は、position:absolute;以外は状況に合わせて変更して下さい
※表示座標をマウスカーソルに追従させる技は省略します([技m018]を参照して下さい)
-----次の行から(copy)-----
<!--表示位置を固定化する文字(最初は空)-->
<div id="position_Obj"
style="position:absolute;width:450;text-align:center;color:#000000;font-size:9pt;background-color:#c0c0c0;filter:alpha(opacity=70);">
-----上の行まで(copy)-----
◆手順2【スクリプトの実行】
※<body〜>に記述します(オープン時に起動)
-----次の行から(copy)-----
<body onmousemove="Mouse_positionXY()">
-----上の行まで(copy)-----
◆手順4a【スクリプト】座標を表示する
※<div id="position_XY">にinnerTextを用いて座標数値を書き込んでいます
-----次の行から(copy)-----
function Mouse_positionXY() {
Xs=document.body.scrollLeft; //X方向のスクロール量
Ys=document.body.scrollTop; //Y方向のスクロール量
Xe=event.x; //ウィンドウ上のX座標
Ye=event.y; //ウィンドウ上のY座標
X=Xs+Xe; //ファイル上のX座標
Y=Ys+Ye; //ファイル上のY座標
document.all["position_Obj"].innerText=
"| X= " + X + " (px) , Y= " + Y + " (px) | Xs= " + Xs + " (px) , Ys= " + Ys + " (px) | Xe= " + Xe + " (px) , Ye= " + Ye +" (px) |";
}
-----上の行まで(copy)-----
解説等
◆この技だけでは単に座標を表示するだけであまり面白いものではありません。別の技と組み合わせて興味ある技が構成できます。
※いずれご紹介しますのでお待ちください。
【活用技】
◆マウスカーソルにXY座標を追従させる技は
[技m018]画像や文字をマウスカーソルに追従させる、を参照して下さい。
◆XY座標の詳細を常にウィンドウの固定した位置に表示させる技は
[技g013]ウィンドウをスクロールしても画像や文字は動かない(固定)、を参照して下さい。
keyword
◇scrollLeft◇scrollTop◇event.x
history
◇(2004.10.09)設置
注意
◆操作MENUの[Window Resize]を選択するとウィンドウサイズが変更可能です。
◆上記の[web技]をクリップボードにコピーしテキストエディタに貼り付けて使用する場合は、表示のための改行記号や全角・半角スペースの記号等を削除して下さい。
-----次の行から(copy)-----
(この部分をクリップボードにコピーしてテキストエディタ等に貼り付けて下さい)
-----上の行まで(copy)-----