Adding a text caption to this slideshow script

[Wolfman]

Hi guys

I've been using this, my favorite slideshow script for its simplicity. Now I'd like to add a text caption to each image that rotates in-kind, but I'm having trouble working out the dynamics.
Here's the current script:

<SCRIPT LANGUAGE="JAVASCRIPT" TYPE="TEXT/JAVASCRIPT">
<!--

myPix = new Array(
"images/picture01.jpg",
"images/picture02.jpg",
"images/picture03.jpg",
"images/picture04.jpg")
thisPic = 0
imgCt = myPix.length - 1

function chgSlide(direction) {
if (document.images) {
thisPic = thisPic + direction
if (thisPic > imgCt) {
thisPic = 0
}
if (thisPic < 0) {
thisPic = imgCt
}
document.myPicture.src=myPix[thisPic]
}
}

// -->
</SCRIPT>

<P><IMG SRC="images/picture01.jpg" NAME="myPicture" WIDTH="300" HEIGHT="200"></P>
<A HREF="javascript:chgSlide(-1)"><< Back</A> <A HREF="javascript:chgSlide(1)">Forward >></A>

I was thinking that I could add this second array, but am stuck on how to integrate the resulting variable into the body:

myCap = new Array(
"Text Caption 01",
"Text Caption 02",
"Text Caption 03",
"Text Caption 04")
thisCap = 0
imgCt = myCap.length - 1

function chgSlide(direction) {
if (document.images) {
thisCap = thisCap + direction
if (thisCap > imgCt) {
thisCap = 0
}
if (thisCap < 0) {
thisCap = imgCt
}
document.myCaption.src=myCap[thisCap]
}
}

Any ideas?

[Wolfman]

I found a simple way to use a textarea tag, but it looks junky.

<TEXTAREA NAME=myCaption></TEXTAREA>

I'd like for the text to appear as if it was simple HTML text.

[Wolfman]

I tried combining the variables to no avail, but I think I'm getting closer. This variant tells me, however, that 'myCaption' is null, even though I follow the other array's scripting precisely. What am I doing wrong?

<SCRIPT LANGUAGE="JAVASCRIPT" TYPE="TEXT/JAVASCRIPT">
<!--

myPix = new Array(
"images/01.jpg",
"images/02.jpg",
"images/03.jpg")
thisPic = 0
imgCt = myPix.length - 1

myTxt = new Array(
"Caption 1",
"Caption 2",
"Caption 3")
thisTxt = 0
txtCt = myTxt.length - 1

function chgSlide(direction) {
if (document.images) {
thisPic = thisPic + direction
thisTxt = thisTxt + direction
if (thisPic > imgCt) {
thisPic = 0
thisTxt = 0
}
if (thisPic < 0) {
thisPic = imgCt
thisTxt = txtCt
}
document.myPicture.src=myPix[thisPic]
document.myCaption.src=myTxt[thisTxt]
}
}

// -->
</SCRIPT>


<P><IMG SRC="images/01.jpg" NAME="myPicture" WIDTH="50" HEIGHT="40" ALT="Slideshow"></P>
<SCRIPT LANGUAGE="JAVASCRIPT" TYPE="TEXT/JAVASCRIPT">
document.write(myCaption)
</SCRIPT><BR>
<A HREF="javascript:chgSlide(-1)">Back</A> <A HREF="javascript:chgSlide(1)">Forward</A>

[Logician]

document.myCaption.src=myTxt[thisTxt]

You don't have an element called document.myCaption so you cant give it a src property, and even if you could it wouldn't be any use.

Create a <span> element with whatever CSS styling you want, give it an ID attribute, say 'myCaption', include the function below and use it thus:

caption('myCaption', myTxt[thisTxt]);

function caption(elemId, txt)
{
 var elem;
 
 if(document.getElementById && (elem=document.getElementById(elemId)))
  if(elem.firstChild)
   elem.firstChild.data=txt;
  else
   elem.appendChild(document.createTextNode(txt)); 
}

@ADMIN - Why are we now getting those poxy line numbers that nobody wants?

Alternatively, try a different slideshow

[Wolfman]

Thanks. I'm motivated to use this one because it's very basic - no transition effects, no page refreshing, no fancy text boxes. Just a picture and some text that can be formatted using traditional tags. Will give your corrections a whirl - and thanks.