Как сделать, чтобы при нажатии на клавишу менялась картинка?

Question

я новичок в js и столкнулся с проблемой.

Есть клавиши (клавиатуры) q,w,e. Нужно, чтобы при нажатии на q выскакивала картинка image1.png, при нажатии на w - картинка image2.png, а при нажатии на e картинка image3.png.

После того, как клавиша отпущена - картинка должна возвращатся на исходную, которая была до нажатия на клавишу.

Т.е. должна получиться такая схема:

q-image1.png
w-image2.png
e-image3.png
r-image4.png
t-image5.png
y-image6.png

Код, который я получил выглядет следующим образом (вложен): в нем картинка "логотип гугла" - это картинка по-умолчанию, а логотип яндекса появляется после нажатия на клавишу "пробел". Затем снова возвращается на картинку гугла.... Но он получается очень большой и неудобный, поэтому может можно его объеденить в массив или переписать его заново...?

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png" id="spacebar42" />
  
<img src="image2" id="spacebar13">
<img src="image3" id="spacebar55">
   
<script type="text/javascript">
        $(function() {
  var myRealUrl = "https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png";
  $("body").on("keydown", function(e) {
    if (e.which == 32) {
      $("#spacebar42").attr("src", "https://yastatic.net/s3/home/logos/citylogos/face_mask/ru.png");
      
    }
  });

  $("body").keyup(function(e) {
    if (e.which == 32) {
      $("#spacebar42").attr("src", myRealUrl);
      
    }
  });
});

     $(function() {
  var myRealUrl = "image2";
  $("body").on("keydown", function(e) {
    if (e.which == 35) {
      $("#spacebar13").attr("src", "image3");
      
    }
  });

  $("body").keyup(function(e) {
    if (e.which == 35) {
      $("#spacebar13").attr("src", myRealUrl);
     
    }
  });
});

    </script>

Answer 1

const keyImages = [
	{
		code: 'keyW',
		image: 'https://i.picsum.photos/id/591/536/354.jpg'
	},
	{
		code: 'keyQ',
		image: 'https://i.picsum.photos/id/146/536/354.jpg'
	},
	{
		code: 'keyE',
		image: 'https://i.picsum.photos/id/171/536/354.jpg'
	},
	{
		code: 'keyR',
		image: 'https://i.picsum.photos/id/147/536/354.jpg'
	},
	{
		code: 'keyT',
		image: 'https://i.picsum.photos/id/141/536/354.jpg'
	},
	{
		code: 'keyY',
		image: 'https://i.picsum.photos/id/149/536/354.jpg'
	}
];
const originalImage = 'https://i.picsum.photos/id/140/536/354.jpg';
const image = document.querySelector('img');
image.src = originalImage;

window.onkeydown = (e) => {
	const keyImage = keyImages.find(item =>
		item.code.toLowerCase() === e.code.toLowerCase());

	if (keyImage) image.src = keyImage.image;
}

window.onkeyup = () => image.src = originalImage;

<img src="" alt="">

Answer 2

как-то так должно быть, наверное. Пример для abcde

const letters = {
     KeyA: "https://3.bp.blogspot.com/-YwTv52HFHGQ/XWOrag3l2JI/AAAAAAAAH-0/wyVWT7afleIfWs_S_i6WYOcOi1qtCIe7QCLcBGAs/s640/big-printable-alphabet-letter-a.jpg",
     KeyB: "https://4.bp.blogspot.com/-Qn7V9XHWXuw/XWOsM7pEUpI/AAAAAAAAH-8/b4V6rftSmpYHAIyxmC9IBK_lEDg0TeuVgCLcBGAs/s400/big-printable-alphabet-letter-b.jpg",
     KeyC: "https://3.bp.blogspot.com/-71k1-7LSDhg/XWOsjc1n0RI/AAAAAAAAH_I/8cKwrnXqUDod4cIWM9pmFSERgmQbaR0ywCLcBGAs/s400/big-printable-alphabet-letter-c-01.jpg",
     KeyD: "https://1.bp.blogspot.com/-TDcuCPkvu_Q/XWOs9zpfJDI/AAAAAAAAH_Q/ca2bidfMxj4Ud8hGOfjaVGwZofxXlTeTQCLcBGAs/s400/big-printable-alphabet-letter-d-01.jpg",
     KeyE: "https://2.bp.blogspot.com/-NhLTZGPRG90/XWOtR_r-5SI/AAAAAAAAH_Y/w713N1HUZzUJ--8UjH-fCXSBl363ekT5gCLcBGAs/s400/big-printable-alphabet-letter-e.jpg",
   };

$('input').keydown(function(e){
             let c = e.originalEvent.code;
             if(letters.hasOwnProperty(c)){
                 $("#target").attr('src', letters[c]);
             }
          }).keyup(function(){
             $(this).val(null);
             $("#target").attr('src', letters.KeyA);   
          });

#target {
   width: 200px;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input/><br/>
<img id="target" src="https://3.bp.blogspot.com/-YwTv52HFHGQ/XWOrag3l2JI/AAAAAAAAH-0/wyVWT7afleIfWs_S_i6WYOcOi1qtCIe7QCLcBGAs/s640/big-printable-alphabet-letter-a.jpg"/>

БЛОГ НА HUSL

Как сделать, чтобы при нажатии на клавишу менялась картинка?

Ответы (2 шт):