Need Help making a "tabled Slide show" with 4 pics

My professor gave us this problem:

Create an html document named MidtermExam4.html. Add a table to this document with 2 rows
and 2 columns. Use the Internet or your own photo library to find 4 similarly sized photos and place one photo in
each of the 4 cells of the table. Write JavaScript code that will change the location of the each image to a different
table cell every 4 seconds. For example:
After 0 Seconds, you table would look like this:
Image 1 Image 2
Image 3 Image 4
After 4 Seconds:
Image 4 Image1
Image 2 Image 3

Anyway, I managed to get the pics on the html doc and I’m able to get the first pic to cycle through the others. But, the other pics just stay the same. Here’s the code I have so far:

<!DOCTYPE html
PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<title></title>
<meta http-equiv=“content-type” content=“text/html;charset=iso-8859-1” />
<script type=“text/javascript”>
/* <![CDATA[*/
var curpic=“one”;
var changepics;
function changer() {
switch (curpic)
{
case “one”:
document.images[0].src= “firebird1.jpg”;
curpic = “four”;
break;
case “two”:
document.images[0].src= “firebird2.jpg”;
curpic = “one”;
break;
case “three”:
document.images[0].src= “firebird3.jpg”;
curpic = “two”;
break;
case “four”:
document.images[0].src= “firebird4.jpg”;
curpic = “three”;
break;

}

}
/* ]]> */
</script>
</head>

<body onload=“var changepics=setInterval(‘changer()’, 4000);”>

<table>
<tr>
<td><img src=“firebird1.jpg” width=“559” height=“243” />
<td><img src=“firebird2.jpg” width=“400” height=“251” />
</tr>
<tr>
<td><img src=“firebird3.jpg” width=“480” height=“340” />
<td><img src=“firebird4.jpg” width=“440” height=“330” />
</tr>
</table>
</body>
</html>

I don’t need any fancy styles or effects, I just need it to work the way as mentioned above. I searched all over the net and found nothing.

Any help you guys could give would be most appreciated. Thanks!

-Andrew

Give each of the images an id=“image-1” or image-2 or whatever. Then you can use getelementbyid to change the source of the images.

I would store the values of the image file names in an array. When fired the script shuffles the array and then uses the array to cycle through the images and assign the sources.

Also, you need to close your table cell’s. Also the dimensions of the images is not necessary for this project (unless your prof says it is :D)


<td><img src="firebird1.jpg" width="559" height="243" />
<td><img src="firebird2.jpg" width="400" height="251" />
</tr>

should be


<td><img src="firebird1.jpg" /></td>
<td><img src="firebird2.jpg" /></td>
</tr>