HTML/JSを使用して、異なるキーを押したときに同じフレームに異なる画像が表示されるようにします。

Question

キーボードの各キーの同じフレームに異なる画像を表示するフレームをコーディングしようとしています。

すなわち押して「Q」と1.pngは、私が唯一のJSを使用しますがjQueryのだろう（提案を開いていています

フレームに示されたフレーム を押して「W」と2.pngに示されていますより良い？）

ありがとうございました！キーイベントを取得することによって

Answer 1

スタート、あなたがイメージのため<img>タグを持つことができますHow to listener the keyboard type text in Javascript?

を参照してください。キーを押すたびに、img.srcを変更します。

例は次のとおりです。http://codepen.io/anon/pen/XMJjqO?editors=1111 'a'と 's'は200x400と400x400イメージの間で変更されます。

HTML

<img id='frame' src='http://lorempixel.com/400/200/'></img> 

JS

var f = document.getElementById('frame'); 
document.onkeypress = function(e) { 
    e = e || window.event; 
    var charCode = (typeof e.which == "number") ? e.which : e.keyCode; 
    if (charCode) { 
     if(String.fromCharCode(charCode) === 'a') { 
     f.src = 'http://lorempixel.com/400/200/'; 
     } else if (String.fromCharCode(charCode) === 's'){ 
      f.src = 'http://lorempixel.com/400/400/'; 
     } 
    } 
};