Improve image gallery using Javascript

In the first tutorial we made a simple image gallery, where you just clicked on the icon image to change the main picture.
Well in this tutorial we are going to build on it and make it more accessible by letting a user move through the images using the left and right keyboard arrow keys. As you may know there will also be browser compatibility issues and we will cover them as well. So we will make the picture gallery cross browser compatible and backward compatible with Netscape 4.x. Even though Netscape has become redundant it is still good how to know how to address these issues.

/*******************JavaScript Below****************************/
//Allow the key board to move the images
//this is the key down event and calls the changeKey
document.onkeydown = changeKey;
var keyPressed;//this variable will be used to stored the pressed key.
//the key codes are different in web browsers. This test for Mozilla browsers and safari.
if (document.layers) {
	document.captureEvents(Event.KEYDOWN)//Incase user is using netscape 4.x must use captureEvent
	ltDir = 28
	rtDir = 29
}
else {//IE key codes
	ltDir = 37
	rtDir = 39
}
//the evt parameter is used to collect the event
function changeKey(evt) {
	if (evt) {//tests for browser type & event
		keyPressed = evt.which //netscape key code
	}
	else {
		keyPressed = window.event.keyCode //internet explorer key code
	}
	if (keyPressed == ltDir) {//test if left arrow is pressed
		slideShow(1,-1);//this is the function used to change the image, covered in the previous lecture
	}else if (keyPressed == rtDir) {//test if right arrow is pressed
		slideShow(1,1);
	}
}
/*******************End of JavaScript****************************/

Notes

Make sure you add this JavaScript to your previous script (T1 basic image gallery) at the top.

If you have any question or want to know more about certain web design techniques then please post them on the discussion board, and I will reply as soon as possible.