クリックの座標
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD.xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta HTTP-EQUIVE="Content-Type" CONTENT="text/html;charset=utf-8" />
<title>クリックの座標</title>
<script src="../js/prototype.js" type="text/Javascript"></script>
<script src="../js/funcs.js" type="text/Javascript"></script>
<script src="../js/test6.js" type="text/Javascript"></script>
</head>
<body>
<form id=frm name=frm>
<table>
<tr>
<td style="width:500px;">
<div id=area style="width:500px;height:500px;background-color:pink;"></div>
</td>
<td valign=top style="width:200px;;">
x座標(ブラウザ表示領域の左上を原点)<input type=text id=txt1 value="" /><br />
y座標(ブラウザ表示領域の左上を原点)<input type=text id=txt2 value="" /><br />
x座標(ディスプレイ画面の左上を原点)<input type=text id=txt3 value="" /><br />
y座標(ディスプレイ画面の左上を原点)<input type=text id=txt4 value="" /><br />
</td>
</tr>
</table>
</form>
</body>
</html>
<!--
test6.js
//画面の起動時に呼びだされます
Event.observe( window, 'load', getFormContents );
//イベントを登録します
function getFormContents(){
//divで指定した領域ないで感知したマウスの動きに対して
//処理をするための準備をします
var obj = document.getElementById("area");
setListener(obj, "mousemove", funcGetData);
}
//マウスが動いたときの座標を表示します
function funcGetData(e)
{
document.getElementById("txt1").value=e.clientX;
document.getElementById("txt2").value=e.clientY;
document.getElementById("txt3").value=e.screenX;
document.getElementById("txt4").value=e.screenY;
}
--------------------------------------------------
-->
|
|