2008年06月12日

オブジェクトの左上を基点としたマウスのX座標、Y座標の取得

スポンサード リンク

サンプルソース

<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT language="JavaScript">
<!--mouse_offsetXY.html
window.document.onmousemove = move_Ly;

function move_Ly(e){
// IE
if (document.all){
dx = event.offsetX; // offsetXはマウスポインタの要素上のX座標
dy = event.offsetY; // offsetYはマウスポインタの要素上のY座標

// Mozila Firefox
}else{
dx = e.layerX;
dy = e.layerY;
}
document.myForm.tBox.value= '  X位置='+dx+':Y位置='+dy; //テキストボックスに座標を表示
}
// -->
</SCRIPT>


</HEAD>
<body>
<FORM name="myForm"><INPUT size="40" type="text" name="tBox" value="" style="cursor : pointer;"></FORM>
<DIV style="position : absolute;top : 160pt;left : 200px;"><IMG src="********.gif" border="1" /></DIV>
</body></HTML>

ひとこと、二言

IEの場合はoffsetX、offsetY Mozila Firefoxの場合はlayerX、layerY
を使ってオブジェクトの左上を基点としたマウスのX座標、Y座標を取得します。



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

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