키보드로 이미지 상하좌우 이동시키기

<SCRIPT LANGUAGE="JavaScript1.2">
<!-- Beginning of JavaScript -

var img1 = new Image();
img1.src = "l11011.gif";

var img2 = new Image();
img2.src = "l21011.gif";

var img3 = new Image();
img3.src = "l31011.gif";

var img4 = new Image();
img4.src = "r11011.gif";

var img5 = new Image();
img5.src = "r21011.gif";

var img6 = new Image();
img6.src = "r31011.gif";

var img7 = new Image();
img7.src = "balloon1011.gif";

var i_img=1
runto="r"

var thisthing,thisballoon,k
var xstep=20
var ystep=20
var fasterslower=5

function keyDown(DownEvents){
        if (document.all){
                  k=window.event.keyCode
                window.status=k
                if (k==52) {
                        thisthing.posLeft+=xstep
                        runto="r"
                        zebra.src=runto+i_img+"1011.gif"
                        thisballoon.posTop=-300
                }
                if (k==49) {
                        thisthing.posLeft-=xstep
                        runto="l"
                        zebra.src=runto+i_img+"1011.gif"
                        thisballoon.posTop=-300
                }                                
                if (k==50) {
                        thisthing.posTop+=ystep
                        zebra.src=runto+"21011.gif"
                        thisballoon.posTop=thisthing.posTop-132
                        thisballoon.posLeft=thisthing.posLeft
                        
                }
                if (k==51) {
                        thisthing.posTop-=ystep
                        zebra.src=runto+"21011.gif"
                        thisballoon.posTop=thisthing.posTop-132
                        thisballoon.posLeft=thisthing.posLeft
                }
        }
        if (document.layers){
                k=DownEvents.which
                window.status=k
                if (k==52) {
                        thisthing.left+=xstep
                        runto="r"
                        document.thingtomove.document.zebra.src=runto+i_img+"1011.gif"
                        thisballoon.top=-300
                }
                if (k==49) {
                        thisthing.left-=xstep
                        runto="l"
                        document.thingtomove.document.zebra.src=runto+i_img+"1011.gif"
                        window.status=runto+i_img+"1011.gif"
                        thisballoon.top=-300
                }                                
                if (k==50) {
                        thisthing.top+=ystep
                        document.thingtomove.document.zebra.src=runto+"21011.gif"
                        thisballoon.top=thisthing.top-132
                        thisballoon.left=thisthing.left
                        
                }
                if (k==51) {
                        thisthing.top-=ystep
                        document.thingtomove.document.zebra.src=runto+"21011.gif"
                        thisballoon.top=thisthing.top-132
                        thisballoon.left=thisthing.left
                }
        }
        if (k==8) {
                ystep-=fasterslower
                xstep-=fasterslower
                if(xstep<1) {xstep=1}
        }
        if (k==32) {
                ystep+=fasterslower
                xstep+=fasterslower
                if(xstep>50) {xstep=50}
        }
        i_img++
        if (i_img >= 4) {i_img=1}
}

function initiate(){
        if (document.layers) {
                document.onkeypress=keyDown
                document.captureEvents(Event.KEYPRESS)
                thisthing=document.thingtomove
                thisballoon=document.balloondiv
                thisthing.top=200
                thisthing.left=200
        }
         if (document.all){
                 document.onkeydown=keyDown
                  thisthing=document.all.thingtomove.style
                thisballoon=document.all.balloondiv.style
                thisthing.posTop=200
                thisthing.posLeft=200
        }
        
}

window.onload=initiate

// - End of JavaScript - -->
</SCRIPT>

<STYLE TYPE="text/css">
<!--
.copystyle {
        position:absolute;
        top:30px;
        left:400px;
        font-family: Arial;
        font-size:8pt;
        color: #000000;
}
A {color: #000000 }
A:visited {color: #000000 }
A:hover { color: #0000FF;text-decoration:none }
-->
</STYLE>

</HEAD>

<BODY BGCOLOR="#FFFFFF" LINK="#000000" VLINK="#000000">

<DIV id="download" class="copystyle">
<table width=180 cellpadding=1>
<tr><td align=middle colspan=2 bgcolor=AAAAAA>사용방법:</td></tr>
<td align=right bgcolor=DDDDDD>왼쪽으로 </td><td align=left bgcolor=EEEEEE>press 1</td></tr>
<td align=right bgcolor=DDDDDD>오른쪽으로 </td><td align=left bgcolor=EEEEEE>press 4</td></tr>
<td align=right bgcolor=DDDDDD>위로 </td><td align=left bgcolor=EEEEEE>press 3</td></tr>
<td align=right bgcolor=DDDDDD>아래로 </td><td align=left bgcolor=EEEEEE>press 2</td></tr>
</table>
</DIV>

<DIV id="thingtomove" style="position:absolute;top:0px"><img name="zebra" src="r11011.gif"></DIV>

<DIV id="balloondiv" style="position:absolute;top:-300px"><img name="ball" src="balloon1011.gif"></DIV>