2008年06月05日

マウスカーソルの座標(位置)を検出するスクリプト

スポンサード リンク

サンプルソース

<HTML>
<HEAD>
<TITLE></TITLE>
<script type="text/javascript"><!--

window.document.onclick =mouseXY; //画面を押した時 mouseXY()を実行

//マウスX位置取得
function mouseXY(event){
if(document.all){X=document.body.scrollLeft+window.event.clientX;}
else if(document.layers || document.getElementById){X=event.pageX;}

//マウスY位置取得
if(document.all){Y=document.body.scrollTop+window.event.clientY;}
else if(document.layers || document.getElementById){Y= event.pageY;}

alert("X座標="+X+" Y座標="+Y); //メッセ-ジを表示
}
// -->
</SCRIPT>
</HEAD>
<body>

</body></HTML>

ひとこと、二言

マウスカーソルの座標を検出するこのスクリプトは応用範囲の広いスクリプトです。
 ページを華麗に??演出することができます。。

  • 画像にマウスが乗ると説明文をポップアップで表示する。
  • ドラッグして移動する。
  • 小さな画像を押すと,その位置に大きな画像がフェードインする。
  • マウスを追い駆けて移動する。
  • フローティングメニュー 画像を押した所にメニューを表示する。

     などいろいろ使い方があります。

ブラウザによってマウスカーソルの位置取得は異なります。


//IEの場合

window.event.clientX  //画面左端から X座標
window.event.clientY  //画面上端から Y座標

しかしこの値は画面の見えている部分の位置で ページ全体の絶対座標ではありません。
これを補うためdocument.body.scrollLeft , document.body.scrollTopを使います。

document.body.scrollLeft // 左から右にスクロールしている値
document.body.scrollTop // 上から下にスクロールしている値
なので"画面左端からの X座標値" と "左から右にスクロールしている値" を足せば
ページ全体の絶対座標値を得ることができます。

document.body.scrollLeft+window.event.clientX //X座標
document.body.scrollTop+window.event.clientY  //Y座標


//N6,Mozillaの場合

event.pageX   event.pageY でページ全体の絶対座標を返してきます。



posted by javaScript at 14:21 | 大阪 ☁ | マウス操作 | このブログの読者になる | 更新情報をチェックする
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。