画像移動
画像移動スタ－ト
HTML ファイル
click_move.html
MoveImage に戻る
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>クリックして画像移動</title>
<link async
href="css/click_move.css"
rel="stylesheet" type="text/css">
<script async src="js/click_move.js"
type="text/javascript">
</script>
</head>
<body>
<div id="main_s">
<div id="main_s1">
<form>
<table>
<tr>
<th></th>
<th>始点０  </th>
<th>制御点１ </th>
<th>制御点２ </th>
<th>制御点３ </th>
<th>制御点４ </th>
<th>終点５  </th>
</tr>
<tr id="x_line">
<th>Ｘ座標：  </th>
<td>
<input type="text" name="start_x"
size="3" maxlength="4" value=50>
</td>
<td>
<input type="text" name="cont1_x"
size="3" maxlength="4" value=100>
</td>
<td>
<input type="text" name="cont2_x"
size="3" maxlength="4" value=200>
</td>
<td>
<input type="text" name="cont3_x"
size="3" maxlength="4" value=300>
</td>
<td>
<input type="text" name="cont4_x"
size="3" maxlength="4" value=400>
</td>
<td>
<input type="text" name="end_x"
size="3" maxlength="4" value=450>
</td>
</tr>
<tr>
<th>Ｙ座標：  </th>
<td>
<input type="text" name="start_y"
size="3" maxlength="4" value=200>
</td>
<td>
<input type="text" name="cont1_y"
size="3" maxlength="4" value=100>
</td>
<td>
<input type="text" name="cont2_y"
size="3" maxlength="4" value=300>
</td>
<td>
<input type="text" name="cont3_y"
size="3" maxlength="4" value=100>
</td>
<td>
<input type="text" name="cont4_y"
size="3" maxlength="4" value=300>
</td>
<td>
<input type="text" name="end_y"
size="3" maxlength="4" value=200>
</td>
</tr>
<tr>
<td>
<input type="button"
value="入力確定" onClick="set()">
</td>
</tr>
</table>
</form>
<p>始･終点、各制御点はワンクリックして
動かしたい番号を指定し<br>
マウスクリックボタンは押さずに、
マウスを所定位置まで移動し<br>
もう一度ワンクリックして位置を
設定します。
</p>
<img src="img/pos-5.png" id="img5"
onClick = "dragOn('img5')">
<img src="img/pos-4.png" id="img4"
onClick = "dragOn('img4')">
<img src="img/pos-3.png" id="img3"
onClick = "dragOn('img3')">
<img src="img/pos-2.png" id="img2"
onClick = "dragOn('img2')">
<img src="img/pos-1.png" id="img1"
onClick = "dragOn('img1')">
<img src="img/pos-0.png" id="img0"
onClick = "dragOn('img0')">
</div><!-- "main_s1 End-->
<div id="back">
</div>
</div><!-- "main_s End-->
</body>
</html>