Verwenden Sie HTML/JS, um beim Drücken verschiedener Tasten verschiedene Bilder im selben Bild anzuzeigen

Question

Der Versuch, einen Rahmen zu programmieren, der für jede Taste auf der Tastatur ein anderes Bild im selben Rahmen zeigt.

dh Drücken Sie „Q“ und 1.png wird im Rahmen Drücken Sie „W“ und 2.png ist im Rahmen

Ich bin nur aber bin offen für Vorschläge mit JS gezeigt (würde JQuery sein besser?)

Danke für Ihre Hilfe!

Answer 1

Starten von Schlüsselereignissen immer finden How to listener the keyboard type text in Javascript?

Sie einen <img> Tag für das Bild haben. Jedes Mal, wenn eine Taste gedrückt wird, ändern Sie die Datei img.src.

Hier ist ein Beispiel: http://codepen.io/anon/pen/XMJjqO?editors=1111 'a' und 's' wird zwischen einem 200x400 und 400x400 Bild wechseln.

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/'; 
     } 
    } 
};