キーボード操作で画像を動かす

[ T ]キーで上移動、[ G ]キーで下移動、[ F ]キーで左移動、[ H ]キーで右移動します。
（一度ページ内をクリックしてから行ってみて下さい）

　　

　　

　　

・IEの場合、event.keyCode　で、IE以外では　evt.charCode　でキーの文字コードを取得する
・IEの場合、要素の位置情報を持つpixelTopとpixcelLeftを使えば計算にも利用できるので便利。
・IE以外では、要素の位置座標(top、left)を取得し、それを計算に使えるようにparseInt()で数値変換し計算する。

Sample Source......................................................................>>>

<script language="JavaScript"><!--
　function MovePic(evt){
 　　var Elem = document.getElementById("pic");
 　　if(!evt){　　　　　　//IEの場合
  　　　switch (event.keyCode){
    　　　case 116:　　　　　//[ｔ]キー
      　　　　Elem.style.pixelTop -= 10;
      　　　　break;
    　　　case 103:　　　　　//[ｇ]キー
      　　　　Elem.style.pixelTop += 10;
      　　　　break;
    　　　case 102:　　　　　//[ｆ]キー
      　　　　Elem.style.pixelLeft -= 10;
      　　　　break;
    　　　case 104:　　　　　//[ｈ]キー
      　　　　Elem.style.pixelLeft += 10;
     　　　　 break;
  　　　 }
 　　}else{　　　　　　　　//IE以外の場合
  　　　var x = Elem.style.top;　　　　//要素の位置情報(top)を取得
  　　　var y = Elem.style.left;　　　　//要素の位置情報(left)を取得
  　　　switch (evt.charCode){
    　　　　case 116:
     　　　　　 Elem.style.top = parseInt(x) - 10;
      　　　　　break;
    　　　　case 103:
      　　　　　Elem.style.top = parseInt(x) + 10;
      　　　　　break;
    　　　　case 102:
      　　　　　Elem.style.left = parseInt(y) - 10;
     　　　　　 break;
    　　　　case 104:
     　　　　　 Elem.style.left = parseInt(y) + 10;
      　　　　　break;
   　　}
 　 }
　}
　document.onkeypress = MovePic;
　self.focus();  //ｷｰﾎﾞｰﾄﾞｲﾍﾞﾝﾄを認識するように、このﾍﾟｰｼﾞにﾌｫｰｶｽを移す
//--></script>
</head>

<body>
<img id="pic" style="position:absolute;top:150px;left:200;" src="../../images/botan/N005.GIF" width="45" height="15">

(最終更新:12/12/13)
フレーム構成になっています･･･＜[ホーム]　>>　[HTML整理ノート]＞