Add captions to simple JavaScript slideshow

JavaScript
1

Hi There,

I’d like to add captions to this this simple JavaScript slideshow. I have looked and looked and can’t find one that doesn’t use tables for the captions. I’d really like to stick to <divs> if possible.
Thanks so much

<script language="JavaScript">
var i = 0;
var path = new Array();

// LIST OF SLIDES
path[0] = "images/1.gif";
path[1] = "images/2.gif";
path[2] = "images/3.gif";
path[3] = "images/4.gif";
path[4] = "images/5.gif";

function swapImage()
{
   document.slide.src = path[i];
   if(i < path.length - 1) i++; else i = 0;
   setTimeout("swapImage()",3000);
}
</script>


<body onLoad="swapImage()">

<img name="slide" height=200 width=400 src="1.gif">
2

If I understood,


<script type="text/javascript">
var i = 0;
var path = new Array();
var captions = new Array();
// LIST OF SLIDES
path[0] = "images/1.gif";
path[1] = "images/2.gif";
path[2] = "images/3.gif";
path[3] = "images/4.gif";
path[4] = "images/5.gif";

var caption = new Array();
// LIST OF CAPT&#304;ONS

caption[0] = "The Time Through Ages.";
caption[1] = "In the Name of Allah, Most Gracious, Most Merciful.";
caption[2] = "1. By the Time, ";
caption[3] = "2. Verily Man is in loss,";
caption[4] = "3. Except such as have Faith, and do righteous deeds, and (join together) in the mutual enjoining of Truth, and of Patience and Constancy.";

function swapImage()
{
var el = document.getElementById("mydiv");
el.innerHTML=caption[i];
var img= document.getElementById("slide");
img.src= path[i];
   if(i < path.length - 1) i++; else i = 0;
   setTimeout("swapImage()",5000);
alert(document.body.innerHTML);

}
</script>


<body onLoad="swapImage()">

<div id ="mydiv"></div><img name="slide" id="slide" height=200 width=400 src="1.gif">
3

Yes, something like that. I tried it out but I keep getting a [JavaScript Application] error that includes the html code:

<img name=“slide” id=“slide” height=200 width=400 src=“law1.jpg”/>
<div id =“mydiv”></div>

I’ve attached a screenshot of the error prompt.

Here’s how I have my code

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>

<script type="text/javascript">
var i = 0;
var path = new Array();
var captions = new Array();
// LIST OF SLIDES
path[0] = "images/law1.jpg";
path[1] = "images/law2.jpg";
path[2] = "images/law3.jpg";


var caption = new Array();
// LIST OF CAPT&#304;ONS

caption[0] = "The Time Through Ages.";
caption[1] = "In the Name of Allah, Most Gracious, Most Merciful.";
caption[2] = "1. By the Time, ";


function swapImage()
{
var el = document.getElementById("mydiv");
el.innerHTML=caption[i];
var img= document.getElementById("slide");
img.src= path[i];
   if(i < path.length - 1) i++; else i = 0;
   setTimeout("swapImage()",5000);
alert(document.body.innerHTML);

}
</script>
</head>

<body>


<body onLoad="swapImage()">
<img name="slide" id="slide" height=200 width=400 src="law1.jpg"/>
<div id ="mydiv"></div>


</body>
</html>

Many Thanks

4

I uploaded the document for validation.
It display the errors found while checking this document as XHTML 1.0 Transitional!
As far as I know, I corrected the errors.


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>

<script type="text/javascript">
var i = 0;
var path = new Array();

// LIST OF SLIDES
path[0] = "images/law1.jpg";
path[1] = "images/law2.jpg";
path[2] = "images/law3.jpg";

var k = path.length-1;

var caption = new Array();
// LIST OF CAPT&#304;ONS

caption[0] = "The Time Through Ages.";
caption[1] = "In the Name of Allah, Most Gracious, Most Merciful.";
caption[2] = "1. By the Time, ";


function swapImage(){
var el = document.getElementById("mydiv");
el.innerHTML=caption[i];
var img= document.getElementById("slide");
img.src= path[i];

if(i < k ) { i++;}
else  { i = 0; }
setTimeout("swapImage()",5000);
// alert(document.body.innerHTML);

}

// Multiple onload function written by: Simon Willison
// http://simonwillison.net/2004/May/26/addLoadEvent/
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}

addLoadEvent(function() {
swapImage();
});
</script>
</head>
<body>
<img name="slide" id="slide" alt ="my images" height="200" width="400" src="images/law1.jpg"/>
<div id ="mydiv"></div>

</body>
</html>
5

That’s it, looks great! Thank you so much.