| ポイント |
<![CDATA[
k = event.keyCode;
x = myIMG.style.posLeft;
y = myIMG.style.posTop;
if (k == 104) y = y - 4;
if (k == 98) y = y + 4;
if (k == 100) x = x - 4;
if (k == 102) x = x + 4;
myIMG.style.posLeft = x;
myIMG.style.posTop = y;
]]>
|
| 説 明 |
IEでは「window.document.onkeydown = 処理先関数名」とする事でキーが押された場合の処理先を指定することができます。処理先関数ではevent.keyCodeに何のキーが押されたかを示すキーコードが入っています。このキーコードを元に現在の画像の座標を読み出し、設定することで画像を移動させることができます。 |
| サンプル |
<![CDATA[
<html>
<head>
<title>テンキーで画像を移動させる</title>
<script language="JavaScript"><!--
function moveImg()
{
k = event.keyCode;
x = myIMG.style.posLeft;
y = myIMG.style.posTop;
if (k == 104) y = y - 4; // 8
if (k == 98) y = y + 4; // 2
if (k == 100) x = x - 4; // 4
if (k == 102) x = x + 4; // 6
myIMG.style.posLeft = x;
myIMG.style.posTop = y;
}
window.document.onkeydown = moveImg;
//--></script>
</head>
<body>
<img src="q.gif" name="myIMG" style="position:absolute">
</body>
</html>
]]>
|
| 補足説明 |
なし |
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!
|
テンキーで画像を移動させる