Menu
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”
“
<html xmlns=”
<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