Java-Script

　キー操作で画像を移動させる 　　　　　

Sample

ソース

<HTML>
<HEAD>

<SCRIPT LANGUAGE="JavaScript">
<!--
ns = (document.layers) ? 1 : 0;
ie = (document.all) ? 1 : 0;
function move_img() {
  if (ns) {
    block = document.blockDiv;
  }
  if (ie) {
    block = blockDiv.style;
  }
  block.xpos = parseInt(block.left);
  block.active = 0;
  document.onkeydown = keyDown;
  document.onkeyup = keyUp;
}
function keyDown(e) {
  if (ns) {
    var nKey = e.which;
    var ieKey = 0;
  }
  if (ie) {
    var ieKey = event.keyCode;
    var nKey = 0;
  }
  if ((nKey == 122 || ieKey == 90) && !block.active) {
    block.active = 1;
    to_left();
  }
  if ((nKey == 120 || ieKey == 88) && !block.active) {
    block.active = 1;
    to_right();
  }
}
function keyUp(e) {
  if (ns) {
    var nKey = e.which;
    var ieKey = 0;
  }
  if (ie) {
    var ieKey = event.keyCode;
    var nKey = 0;
  }
  if ((nKey == 122 || ieKey == 90 || nKey == 120 || ieKey == 88))
    block.active = 0;
  }
function to_right() {
  if (block.active) {
    block.xpos += 5;
    block.left = block.xpos;
    status = block.xpos;
    setTimeout("to_right()", 25);
  }
}
function to_left() {
  if (block.active) {
    block.xpos -= 5;
    block.left = block.xpos;
    status = block.xpos;
    setTimeout("to_left()", 25);
  }
}
//-->
</script>

</HEAD>
<BODY OnLoad="move_img()">
<div id="blockDiv" STYLE="position:absolute; left:317px; top:130px">
<img src="ani_hosi.gif" width="115" height="63"></div>

<b>【 z 】</b> キーで、左移動<br>
<b>【 x 】</b> キーで、右移動します。<br><br>
</BODY>
</HEAD>

ワンポイント解説

キーコードはそれぞれ、
nKey == 122　がNetscapeの z キー、　ieKey == 90　がIEの z キー、
nKey == 120　がNetscapeの x キー、　ieKey == 88　がIEの x キー、　になります。

function to_right()
function to_left()
で、移動処理をしています。