KEYBOARD SLIDER JAVA SCRIPT

Bookmark and Share
Step by Step how to install java script effect for keyboard slider , you can follow instruction as below to implement in your website or blog :


<!-- THREE STEPS TO INSTALL KEYBOARD SLIDER:

  1.  Copy the coding into the HEAD of your HTML document
  2.  Add the onLoad event handler into the BODY tag
  3.  Put the last coding into the BODY of your HTML document  -->

<!-- STEP ONE: Paste this code into the HEAD of your HTML document  -->

<HEAD>

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin
n = (document.layers) ? 1 : 0;
ie = (document.all) ? 1 : 0;
function moveImage() {
if (n) {
block = document.blockDiv;
}
if (ie) {
block = 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) {
if (n) {
var nKey = e.which;
var ieKey = 0;
}
if (ie) {
var ieKey = event.keyCode;
var nKey = 0;
}
if ((nKey == 97 || ieKey == 65) && !block.active) {  
block.active = 1;
slideLeft();
}
if ((nKey == 100 || ieKey == 68) && !block.active) {  
block.active = 1;
slideRight();
   }
}
function keyUp(e) {
if (n) {
var nKey = e.which;
var ieKey = 0;
}
if (ie) {
var ieKey = event.keyCode;
var nKey = 0;
}
if ((nKey == 97 || ieKey == 65 || nKey == 100 || ieKey == 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);
   }
}
//  End -->
</script>
</HEAD>

<!-- STEP TWO: Insert the onLoad event handler into your BODY tag  -->

<BODY OnLoad="moveImage()">

<!-- STEP THREE: Copy this code into the BODY of your HTML document  -->

<div id="blockDiv" STYLE="position:absolute; left:317px; top:130px; width:137px; height: 121px">
<img src="javaguy.gif" width="115" height="63"></div>

Use <b>A</b> to move the image toward left, <b>D</b> to move the image right.

<!-- Script Size:  2.32 KB -->

{ 0 comments... Views All / Send Comment! }

Post a Comment