遠眼鏡屋2

javascript 実験 任意の場所に文字を貼り付け(二重貼り付け可)

こちらのページに跳ぶ

◎touko2.html


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
javascript の実験 文字の貼りつけ(二重貼り付けも)<br>
四角エリアのあちこちをクリックしてみる(10回まで)。<br><br>
<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";
}
//-->
</script>
<div style="width:500px;height:300px;border:1px solid #000;" onclick="getMousePosition(event);"></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>