forum

Home / DeveloperSection / Forums / Show image when key is pressed with jQuery

Ask Question

Show image when key is pressed with jQuery

Anonymous User 1918 08-Apr-2013
Hi Mindstickians!

I'm trying to make a simple app that when a key is pressed on the users keyboard an image appears respective to that letter. I would like to do this for the entire alphabet (a, b, c...)

if a is pressed a.jpg shows up on my page, if r was pressed r.jpg would appear and so on.

I was going to do this with a mega list of if else statements only im sure there must be another way?

var ctrlPressed = false;
$(window).keydown(function(evt) {
  if (evt.which == 17) { // ctrl
    ctrlPressed = true;
      alert('sdf');
  }
})

Thanks in advance!
javascript javascript 
Updated on 08-Apr-2013
Anonymous User

Anonymous User

Follow
I am a content writter !

Can you answer this question?

Answer

2 Answers

Vijay Shukla

Vijay Shukla

08-Apr-2013
Hi Lois!

Match again a-z as below

$(window).keydown(function(e) {
    var key = String.fromCharCode(e.which).toLowerCase();
    if(/[a-z]/i.test(key) {
        alert(key+'.jpg');
    }
});
AVADHESH PATEL

AVADHESH PATEL

08-Apr-2013
Hi Lois!

var letters = "abcdefghijklmnopqrstuvwxyz";
letters = letters.split("");

$(window).keydown(function(e){
    key = e.which - 65; //makes a-z = 1-27
    key = letters[key];
    $('img[src="' + key + '.jpg"]').show();
}

Liked By