Hello everyone, I am excited to have researched and join a community of talented web designers. Currently, I am a student at a local college, studying for a AS in Internet Services Technology. The web design course I am taking is an online only course, where the professor is an off campus professor who teaches a University in the same city. Therefore, any trouble I run into, I have to post to the schools online campus web page or send in a email through the web page. Which requires waiting for a response. So I decided to join a community. I believe here, I can learn a lot, and seek advice when running into a road block. Another way of getting advice which increases my chance of an immediate response. Also, with my Art background (A.A. in Art Studio) perhaps I can give some ideas when needed.

On my current assignment, we are coding a web page that uses a slide show using javascript. I have coded my page exactly like the course designer illustrated via pdf file. But the page is still not working. I was wondering if someone could take a look at the code and maybe tell me what's wrong.

I greatly appreciate all who have taken the time to read, and who are able to view and critique the code I did for the current assignment.

Thanks!


Code:
<?xml version= "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type= "text/javascript" language= "JavaScript">
var animalsSlides = new Array();
animalSlides[0] = new Image();
animalSlides[1] = new Image();
animalSlides[2] = new Image();
animalSlides[3] = new Image();
animalSlides[4] = new Image();
animalSlides[5] = new Image();

animalSlides[0].src= "images/bison_walk.jpg";
animalSlides[1].src= "images/bison_sits.jpg";
animalSlides[2].src= "images/deer_baby.jpg";
animalSlides[3].src= "images/deer1.jpg";
animalSlides[4].src= "images/deer_face.jpg";
animalSlides[5].src= "images/birds1.jpg";

var theCaptions = new Array();
theCaption[0] = "Out for a stroll";
theCaption[1] = "Keeping warm by a geyser";
theCaption[2] = "A baby deer";
theCaption[3] = "Mom is looking for her baby";
theCaption[4] = "But big sister is looking at you";
theCaption[5] = "Beautiful bathing birds";

var slidenum = 0;
var totalslides = animalSlides.length-1;
function showSlide(direction)
{
	  if (direction == "next")
	  {
	  (slidenum == totalslides) ? slidenum =0 : slidenum ++;
	  }
	  else
	  {
	  (slidenum == 0) ? slidenum = totalslides : slidenum --;
	  }
	if (document.images)
	  {
	  document.slideframe.src = animalSlides[slidenum].src;
	  document.slidecontrols.caption.value =
			theCaptions[slidenum];
	  document.slidecontrols.theslide.value = slidenum+1;
	}
}
</script>
<title>My Slide Show</title>
</head>
<body>
<!-- open the form here and name it "slidecontrols" -->
<form name="slidecontrols">
<table width="750" align="center" border="0">
<tr><td>
	<h3>The Wild Animal Slide Show</h3>
</td></tr>
<tr><td>
	<img src="images/bison_walk.jpg" name= "slideframe" width= "240"
	height= "160" alt= "slide show" />
	<p><textarea name= "caption" rows= "2" cols= "50"> Our slide
	show begins with a bison out for a stroll in Montana.
	</textarea><br>
	<input type= "button" value= "Previous slide" onclick= "showSlide ('previous');">
	<input type= "button" value= "Nest slide" onclick= "showSlide 
	('next');">
	Slide Number:
	<input type= "text" value= "1" name= "theslide" size= "5"></p>
</td></tr>
</table>
</form>
</body>
</html>