я новичок в 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>