便利eelife Java Script

   戻る

マウスポインタ座標を表示します。



サンプルソース
<!--HTMLタグ </HEAD>の下に挿入してください。-->
<BODY onload="Mouse_xypos()">
<P>マウスポインタ座標表示</P>
<SCRIPT language="JavaScript">
<!--
Make_Ly();
// -->
</SCRIPT>
</BODY>
<!--Javascript <HEAD>と</HEAD>の間に挿入してください。 -->
<SCRIPT language="JavaScript">
<!--eelife
document.onmousemove = Mouse_xypos; // マウスを動かしたとき Mouse_xypos を実行
function Mouse_xypos(){  //  ポインタの位置の取得
M_x = event.x;
M_y = event.y;
Dsp_Ly();
}

function Dsp_Ly(){  // マウスの位置にレイヤーを移動
document.getElementById("Lyid").style.left= M_x;
document.getElementById("Lyid").style.top = M_y;
document.getElementById("Lyid").innerText ='  X位置='+M_x+':Y位置='+M_y; //座標の表示
}


function Make_Ly(){  // レイヤーの作成、idが"Lyid"で 背景色が silver です。
document.write('<div id="Lyid" style="position:absolute;top:0px;left:0px;background-color:silver;"></div>');
}

// -->
</SCRIPT>
コメント
event.x : ポインタの水平座標 (x座標 左からの位置) を取得
event.y : ポインタの垂直座標 (y座標 上からの位置) を取得

レイヤーの設置