JavaScript Forum

**sopwyin54** · 06-23-2009, 01:06 PM

Ok um i am new to css, working with some code that moves a div around the html document using W(up) S(down) A(left) D(right). I want to be able to have it change the image on keypress, so when you press W is shows one image and S shows a different one..ect

HELP PLEASE,
Sop(New user

)

**sopwyin54** · 03:36 PM

Oh and the code i'm using.

Code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 
 <style type="text/css">
 body {
  margin: 0px;
  padding: 0px;
 }
 #myDiv {
                         background-color: #;
  position: absolute;
  overflow: hidden;
  width: 150px;
  height: 150px;
  left: 265px;
  top: 265px;
 }
 </style>
 <script type="text/javascript">
 <!--
  var leftPos = topPos = 265;
  var speed = 5;
  function updateDiv(keyCode) {
   switch (keyCode) {
    case 65: leftPos -= (leftPos > 0) ? speed : 0; break;
    case 68: leftPos += (leftPos < 1200) ? speed : 0; break;
    case 87: topPos -= (topPos > 0) ? speed : 0; break;
    case 83: topPos += (topPos < 2680) ? speed : 0; break;
   }
   document.getElementById('myDiv').style.left = leftPos + 'px';
   document.getElementById('myDiv').style.top = topPos + 'px';
  }
  document.onkeydown = function(evt) {
   updateDiv(evt?evt.keyCode:event.keyCode);
  }
 //-->
 </script>
</head>
<body>
<div id="myDiv"><img src="H.gif" border="0"></div>
</body>
</html>

**sopwyin54** · 06-23-2009, 01:13 PM

forget the <textarea></textarea> tags.. thought it would actually show one.