how to change the image?

Discussion in 'JavaScript' started by mark103, Mar 7, 2013.

0
  1. #1
    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.


    <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>
    Code (markup):

    When I press on the keyboard, it doesn't change the image.

    Does anyone know how i can do this?

    thanks in advance
     
    mark103, Mar 7, 2013 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #2
    document.getElementById("image1").innerHTML=.src="

    Do we see a problem here? you want to change it's src, NOT it's innerHTML... you either need to getElementById the IMG, or search for the DIV's first IMG child node...

    NOT that your code makes any sense since you ALSO have it as a background... and of course the lack of properly quoting values, inlined presentational css, redundant value declarations, an overflow that should NEVER trip, the use of 'fixed' which is most always an unreliable mess (and often slows rendering/scrolling to painful levels), and the presence of the border attribute which has no business in any code written after 1998... and most likely the DIV around the IMG for nothing since you aren't doing anything that couldn't be done to IMG directly...

    Your scripting should probably be storing the target instead of getting it two or three separate times, and you may want to be testing with a FULL document so that you get the MODERN scripting behavior instead of 90's style... because yes, adding a doctype DOES change the scripting behavior -- in most EVERY browser in one way or another. (though yes, much more so in IE)

    Gimme a few, I'll toss together a proper rewrite.
     
    Last edited: Mar 7, 2013
    deathshadow, Mar 7, 2013 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #3
    Try this on for size:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
	xmlns="http://www.w3.org/1999/xhtml"
	lang="en"
	xml:lang="en"
><head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=utf-8"
/>

<meta
	http-equiv="Content-Language"
	content="en"
/>

<meta
	name="viewport"
	content="width=device-width; initial-scale=1.0"
/>

<title>
	key event test
</title>

<style type="text/css">

body {
	background:url(/images/blue_background.jpg) center center no-repeat;
}

#image1 {
	position:absolute;
	top:157px;
	left:415px;
}

</style>

</head><body>

<div><!-- this div is just lip service for the validator -->

<img src="/images/image_blue.jpg" alt="" width="114" height="81" id="image1" />

</div>

<script type="text/javascript"><!--

function checkKey(e) {
	e = e || window.event;
	var key = e.charCode | e.keyCode | e.which;
	switch (key) {
		case 38:
			var target=document.getElementById('image1');
			if (target.src = '/images/image_blue.jpg') {
				target.src='/images/image_yellow.jpg';
			} else target.src='/images/image_blue.jpg';
		break;
		case 40:
			window.alert('down arrow')
		break;
	}
}

if (document.addEventListener) {
	document.addEventListener('keydown',checkKey,false);
} else {
	document.attachEvent('onkeydown',checkKey);
}

--></script>

</body></html>
    Code (markup):
     
    deathshadow, Mar 7, 2013 IP