
March 7th, 2013, 07:44 PM
|
|
|
|
How to change the image?
Hi guys,
I need your help, I want to change the image using with a javascript when i press on the up and down keyboard arrow button.
Code:
<html>
<body>
<style type="text/css">
body {background:url('images/blue_background.jpg') no-repeat center center fixed;}
</style>
<div id="image1" style="position:absolute; overflow:hidden; left:415px; top:157px; width:114px; height:81px; z-index:0"><img src="/images/image_blue.jpg" alt="" title="" border=0 width=114 height=81></div>
<script>
document.onkeydown = checkKey;
function checkKey(e) {
e = e || window.event;
if (e.keyCode == '38') {
var path ="/images/image_blue.jpg";
if(document.getElementById("image1").src="/images/image_blue.jpg") {
document.getElementById("image1").innerHTML=.src="/images/image_yellow.jpg";
}
else {
document.getElementById("image1").src="/images/image_blue.jpg";
}
}
else if (e.keyCode == '40') {
window.alert('down arrow')
}
}
</script>
</body>
</html>
When I press on the keyboard, it doesn't change the image.
Does anyone know how i can do this?
thanks in advance
|