| ポイント |
<![CDATA[
function moveImg(evt)
{
k = evt.which;
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
document.images["myIMG"].style.left = x;
document.images["myIMG"].style.top = y;
}
window.document.onkeydown = moveImg;
]]>
|
| 説 明 |
NN6では「window.document.onkeydown = 処理先関数名」とする事でキーが押された場合の処理先を指定することができます。処理先関数ではイベントオブジェクトが引数として渡されるので引数名をevtとすれば「evt.which」でキーコードを読み出すことができます。このキーコードを元に座標を設定することで画像を移動させることができます。 |
| サンプル |
<![CDATA[
<html>
<head>
<title>テンキーで画像を移動させる</title>
<script language="JavaScript"><!--
x = 0;
y = 0;
function moveImg(evt)
{
k = evt.which;
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
document.images["myIMG"].style.left = x;
document.images["myIMG"].style.top = y;
}
window.document.onkeydown = moveImg;
//--></script>
</head>
<body>
<img src="q.gif" name="myIMG" style="position:absolute">
</body>
</html>
]]>
|
| 補足説明 |
なし |
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!
|
テンキーで画像を移動させる