| ポイント |
<![CDATA[
function moveImg(evt)
{
k = evt.which;
x = document.layers["myIMG"].left;
y = document.layers["myIMG"].top;
if (k == 56) y = y - 4; // 8
if (k == 50) y = y + 4; // 2
if (k == 52) x = x - 4; // 4
if (k == 54) x = x + 4; // 6
document.layers["myIMG"].left = x;
document.layers["myIMG"].top = y;
}
window.document.onkeydown = moveImg;
window.document.captureEvents(Event.KEYDOWN);
]]>
|
| 説 明 |
NN4では「window.document.onkeydown = 処理先関数名」とする事でキーが押された場合の処理先を指定することができます。ただし、これだけではキーイベントが取得できないため「window.document.captureEvents(Event.KEYDOWN)」も併記しておく必要があります。処理先関数ではイベントオブジェクトが引数として渡されるので引数名をevtとすれば「evt.which」でキーコードを読み出すことができます。このキーコードを元に現在の画像の座標を読み出し、設定することで画像を移動させることができます。 |
| サンプル |
<![CDATA[
<html>
<head>
<title>テンキーで画像を移動させる</title>
<script language="JavaScript"><!--
function moveImg(evt)
{
k = evt.which;
x = document.layers["myIMG"].left;
y = document.layers["myIMG"].top;
if (k == 56) y = y - 4; // 8
if (k == 50) y = y + 4; // 2
if (k == 52) x = x - 4; // 4
if (k == 54) x = x + 4; // 6
document.layers["myIMG"].left = x;
document.layers["myIMG"].top = y;
}
window.document.onkeydown = moveImg;
window.document.captureEvents(Event.KEYDOWN);
//--></script>
</head>
<body>
<div id="myIMG" style="position:absolute">
<img src="q.gif">
</div>
</body>
</html>
]]>
|
| 補足説明 |
なし |
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!
|
テンキーで画像を移動させる