Another shot at some alternative code...
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title> Untitled </title>
<style type="text/css">
img { height:100px; width:75px; }
div { text-align:center; }
</style>
</head>
<body>
<div id="debugger"></div>
<table id="tbl" border="0">
<tr>
<td><img src=""><div></div></td>
<td><img src=""><div></div></td>
<td><img src=""><div></div></td>
<td><img src=""><div></div></td>
<td><img src=""><div></div></td>
<td><img src=""><div></div></td>
</tr>
</table>
<script type="text/javascript">
var baseURL = 'http://www.nova.edu/hpd/otm/pics/4fun/';
var imgList = ['11.jpg','12.jpg','13.jpg','14.jpg','15.jpg','21.jpg'];
var txtList = ['Exhausted','Confused','Ecstatic','Guilty','Suspicious','Angry'];
var index =0;
function cycle() {
index += 1; index = (index % imgList.length);
var sel = document.getElementById('tbl').getElementsByTagName('img');
for (var i=0; i<sel.length; i++) {
var j=((i+index) % imgList.length);
sel[i].src = baseURL+imgList[j];
}
var sel = document.getElementById('tbl').getElementsByTagName('div');
for (var i=0; i<sel.length; i++) {
var j=((i+index) % imgList.length);
sel[i].innerHTML = txtList[j];
}
setTimeout("cycle()", 3000);
}
window.onload = function() {
cycle();
}
</script>
</body>
</html>
You could also use <th> instead of <td> and drop the CSS for the <div> tag.
Gives a darker font, but that is adjustable as well.