遠眼鏡屋2

javascript 実験 貼り付け場所の座標取得

文字などの貼り付け場所の座標を明示的に取得することが必要になる場合もあるであろう。
この場合 document.write など画面遷移をともなう手段はとれないし、Ajax のテクニックのことは知らないので、あちこち検索した結果、マウス位置取得 のアイディアをお借りすることにした。管理人の緑里庵さんに御礼申し上げます。

下記プログラムをこちらにアップした

◎touko3.html


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type ="text/javascript">
<!--
var i= 0;
function getMousePosition(event) {
i++;
obj = new Object();
obj.x = event.layerX;
obj.y = event.layerY;
var si = i.toString();
document.getElementById(si).style.left = obj.x+"px";
document.getElementById(si).style.top = obj.y +"px";

document.getElementById("xy").value += obj.x + "," + obj.y + "; ";
}
//-->
</script>
</head>
<body>
javascript の実験 文字の貼りつけ 座標取得<br>
マウスクリックごとに右のボックスに座標が表示される。<br><br>
<div style="width:500px;height:300px;border:1px solid #000;" onclick="getMousePosition(event);"></div>
<div style="position:absolute; left:600; top: 60;">
クリック座標<br>
<textarea id="xy" cols=9 rows=15></textarea><br>
</div>

<div id="1" style= "position:absolute; left:100; top:400;" ><b>こんにちは</b></div>
<div id="2" style ="position:absolute; left:100; top:400;" ><b>こんにちは</b></div>
<div id="3" style ="position:absolute; left:100; top:400;" ><b>こんにちは</b></div>
<div id="4" style ="position:absolute; left:100; top:400;" ><b>こんにちは</b></div>
<div id="5" style ="position:absolute; left:100; top:400;" ><b>こんにちは</b></div>
<div id="6" style ="position:absolute; left:100; top:400;" ><b>こんにちは</b></div>
<div id="7" style ="position:absolute; left:100; top:400;" ><b>こんにちは</b></div>
<div id="8" style ="position:absolute; left:100; top:400;" ><b>こんにちは</b></div>
<div id="9" style ="position:absolute; left:100; top:400;" ><b>こんにちは</b></div>
<div id="10" style ="position:absolute; left:100; top:400;" ><b>こんにちは</b></div>

</body>
</html>