Изменить изображение с помощью клавиши со стрелкой?

У меня есть изображение, которое перемещается по экрану с помощью клавиш со стрелками. Я хотел бы знать, как изменить изображение, перемещаемое с каждым ключом.Изменить изображение с помощью клавиши со стрелкой?

Я понимаю, что изображение прикреплено к каждому движению. Движения не привязаны к каждому изображению.

Вот что у меня есть:

<script type="text/javascript"> 

function leftArrowPressed() {var element = document.getElementById("image1"); 
element.style.left = parseInt(element.style.left) - 10 + 'px';} 

function rightArrowPressed() {var element = document.getElementById("image1"); 
element.style.left = parseInt(element.style.left) + 10 + 'px';} 

function upArrowPressed() {var element = document.getElementById("image1"); 
element.style.top = parseInt(element.style.top) - 10 + 'px';} 

function downArrowPressed() {var element = document.getElementById("image1"); 
element.style.top = parseInt(element.style.top) + 10 + 'px';} 


function moveSelection(event) {      
switch (event.keyCode) { 
case 37:leftArrowPressed();break; 
case 39:rightArrowPressed();break; 
case 38:upArrowPressed();break; 
case 40:downArrowPressed();break; 
} 
}; 


function gameLoop() 
{ 
// change position based on speed 
moveSelection(); 
setTimeout("gameLoop()",10); 
} 

</script> 
</head> 

<body onload="gameLoop();" onkeydown="moveSelection(event)" onkeyup="moveSelection(event)"'> 

<img id="image1" src="images/casual.png" style="position: absolute; left: 15; right: 15; top: 15; bottom: auto; " height="20" width="16"> 
</body>

источник

2015-09-06 Matthew

Вы имеете в виду просто изменить это источник: ' element.src = "newImage.png"?? Если так, просто делайте это в каждой функции 'ArrowPressed()'. –

Я пробовал это так, как сказал V31, но хотя мои изображения теперь меняются, они больше не двигаются. – Matthew

Поскольку ответ удалил эту функциональность, просто сделайте то, что я упомянул в своем комментарии. –

В каждой из ваших ArrowPressed() функций просто изменить src элемента к тому, что вы хотите для каждой клавиши со стрелкой:

function downArrowPressed() { 
    var element = document.getElementById("image1"); 
    element.style.top = parseInt(element.style.top) + 10 + 'px'; 
    element.src = "imageForDownArrow.png"; 
} 

function upArrowPressed() { 
    var element = document.getElementById("image1"); 
    element.style.top = parseInt(element.style.top) - 10 + 'px'; 
    element.src = "imageForUpArrow.png"; 
} 

function leftArrowPressed() { 
    var element = document.getElementById("image1"); 
    element.style.left = parseInt(element.style.left) - 10 + 'px'; 
    element.src = "imageForLeftArrow.png"; 
} 

function rightArrowPressed() { 
    var element = document.getElementById("image1"); 
    element.style.left = parseInt(element.style.left) + 10 + 'px'; 
    element.src = "imageForRightArrow.png"; 
}

источник

2015-09-06 03:58:44

Вы должны изменить Src свойство IMG тега при нажатии клавиши. Создал небольшой demo, чтобы продемонстрировать то же самое.

Код:

function changeImage() { 
    document.getElementById("image1").src = "http://andrefrommalta.com/wp-content/uploads/2014/09/137392976177.jpg"; 
} 

function changeImage2() { 
    document.getElementById("image1").src = "http://3.bp.blogspot.com/_IY7CmWJmPL4/R8K5bFaKXpI/AAAAAAAABO0/fH7E6kPibuM/S1600-R/random.jpg"; 
} 

function changeImage3() { 
    document.getElementById("image1").src = "http://www.newton.ac.uk/files/covers/968361.jpg"; 
} 

function changeImage4() { 
    document.getElementById("image1").src = "http://k41.kn3.net/taringa/1/7/0/5/5/4/74/gatessb/E6F.gif?3362"; 
} 

function checkKey(e) { 

    e = e || window.event; 

    if (e.keyCode == '38') { 
     //up arrow 
     changeImage(); 
    } else if (e.keyCode == '40') { 
     // down arrow 
     changeImage2(); 
    } else if (e.keyCode == '37') { 
     // left arrow 
     changeImage3(); 
    } else if (e.keyCode == '39') { 
     // right arrow 
     changeImage4(); 
    } 

} 

document.onkeydown = checkKey;

источник

2015-09-06 03:15:30 V31

Изображение не движется, хотя теперь. – Matthew

Изменить изображение с помощью клавиши со стрелкой?

ответ

Смежные вопросы