|
↑
Scrolls >>>
Now you can move images and objects across the screen by simply using keys from the keyboard.
Use A to move the image toward left, D to move the image right.
Step 1: Add the below code to the <body> section of your page:
<script
language="javascript"
type="text/javascript">
ie
=
(document.all)
?
1
:
0;
n
=
!ie;
function
moveImage()
{
block
=
document.getElementById('blockDiv').style;
block.xpos
=
parseInt(block.left);
block.active
=
0;
document.onkeydown
=
keyDown;
document.onkeyup
=
keyUp;
if
(n)
{
document.captureEvents(Event.KEYDOWN
|
Event.KEYUP);
}
}
function
keyDown(e)
{
var
keycode;
if
(window.event)
keycode =
window.event.keyCode;
else
if
(e)
keycode =
e.keyCode;
else
return
true;
if
((keycode
==
97
||
keycode ==
65)
&&
!block.active)
{
block.active
=
1;
slideLeft();
}
if
((keycode
==
100
||
keycode ==
68)
&&
!block.active)
{
block.active
=
1;
slideRight();
}
}
function
keyUp(e)
{
var
keycode;
if
(window.event)
keycode =
window.event.keyCode;
else
if
(e)
keycode =
e.keyCode;
else
return
true;
if
((keycode
==
97
||
keycode ==
65
||
keycode ==
100
||
keycode ==
68))
block.active
=
0;
}
function
slideRight()
{
if
(block.active)
{
block.xpos
+=
5;
block.left
=
block.xpos;
status
=
block.xpos;
setTimeout("slideRight()",
25);
}
}
function
slideLeft()
{
if
(block.active)
{
block.xpos
-=
5;
block.left
=
block.xpos;
status
=
block.xpos;
setTimeout("slideLeft()",
25);
}
}
window.onload=moveImage;
</script>
<div
align="center"
id="blockDiv"
STYLE="position:absolute;
left:317px; top:150px; width:137px; height: 121px">
<img
src="alien.gif"
width="115"
height="63"></div>
|
Step 2: The script uses an image as part of its interface. You can create your own, or use the below :
(right click image, and select "Save Image As")
Upload it into the same directory as your webpage.
→
|
