css - Html: How to dynamically move a Image using the arrow keys? -
i trying make image move on command (the arrow keys), using css.
i thought this:
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> </head> <script> function a() { // k global variable dont know how declare document.getelementbyid("img1").style.top = k + "px"; k++; // , dont know how trigger function using arrow keys } </script> <body> <form id="form1" runat="server"> <div> <img id="img1" src="images/logo.jpg" height="100" width="100" style="position:absolute; left:100px; top:100px; z-index:1" /> </div> </form> </body> </html>
you use onkeypress event using javascript capture keypress events of keyboard.
for eg:
<input type="text" onkeypress="myfunction()">