This should serve as a starting point ...
Code:
<html>
<head>
<title> Gallery </title>
<script type="text/javascript">
var imgPtr = 0;
var baseURL = 'http:/www.nova.edu/hpd/otm/pics/4fun/';
var imgList = [
['11.jpg','Exhausted: Worn out'],
['21.jpg','Angry: Display rage'],
['31.jpg','Embarrassed: Self-conscious'],
['41.jpg','Enraged: Infuriate'],
['51.jpg','Overwhelmed: Overpower, crush'],
['12.jpg','Confused: Perplex'],
['22.jpg','Hysterical: Emotional frenzy'],
['32.jpg','Happy: Joyful, pleased, glad'],
['42.jpg','Ashamed: Feeling disgraced'],
['52.jpg','Hopeful: Long for']
]
function $_(IDS) { return document.getElementById(IDS); }
function slideshow() {
$_('myPic').src=baseURL+imgList[imgPtr][0];
$_('myPic').title=imgList[imgPtr][1];
$_('myCmmt').innerHTML=imgList[imgPtr][1];
}
function slideShowChange(direction) {
imgPtr = imgPtr + direction;
if (imgPtr < 0) { imgPtr = imgList.length-1; }
imgPtr = imgPtr % imgList.length;
slideshow();
}
function slideShowRandom() {
imgPtr = Math.floor(Math.random()*imgList.length);
slideShowChange(0);
}
window.onload = function() { slideShowChange(0); }
</script>
</head>
<body>
<div style="text-align: center">
<img src="" id="myPic" title="" border="0" height="150" width="200"> <br>
<div id="myCmmt"></div> <p>
<a href="#" onclick="slideShowChange(-1); return false;">« Previous</a> |
<a href="#" onclick="slideShowRandom(); return false;"> Random</a> |
<a href="#" onclick="slideShowChange(1); return false;"> Next »</a>
</div>
</body>
</html>