遠眼鏡屋2

javascript 実験 九路盤に黒石もどきを並べる

下記プログラムを こちらにアップした
九路盤と黒石もどきは HTML5canvas API で作成した。その方法は次回に。

◎touko5.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-20) +"px";
document.getElementById(si).style.top = (obj.y+100-20) +"px";

document.getElementById("xy").value += obj.x + "," + obj.y + "; ";
}
//-->
</script>
</head>
<body>
<div style="position:absolute; left:0; top:100;" onclick="getMousePosition(event);"><img src="goban.png"></div>
<div style="position:absolute; left:600; top: 160;">
クリック座標<br>
<textarea id="xy" cols=9 rows=15></textarea><br>
</div>
<div style="position:absolute; left:0; top: 570;">
javascript の実験 九路盤に黒石もどき 座標取得。<br>
マウスクリックごとに右のボックスに座標が表示される(10回まで)。
</div>
<div id="1" style= "position:absolute; left:100; top:1500;" ><img src="kuro.png" width="40" height="40"></div>
<div id="2" style ="position:absolute; left:100; top:1500;" ><img src="kuro.png" width="40" height="40"></div>
<div id="3" style ="position:absolute; left:100; top:1500;" ><img src="kuro.png" width="40" height="40"></div>
<div id="4" style ="position:absolute; left:100; top:1500;" ><img src="kuro.png" width="40" height="40"></div>
<div id="5" style ="position:absolute; left:100; top:1500;" ><img src="kuro.png" width="40" height="40"></div>
<div id="6" style ="position:absolute; left:100; top:1500;" ><img src="kuro.png" width="40" height="40"></div>
<div id="7" style ="position:absolute; left:100; top:1500;" ><img src="kuro.png" width="40" height="40"></div>
<div id="8" style ="position:absolute; left:100; top:1500;" ><img src="kuro.png" width="40" height="40"></div>
<div id="9" style ="position:absolute; left:100; top:1500;" ><img src="kuro.png" width="40" height="40"></div>
<div id="10" style ="position:absolute; left:100; top:1500;" ><img src="kuro.png" width="40" height="40"></div>

</body>
</html>