Attach txt array to image array???

[03SF06]

Hello,

So I have found this wonderful script that works very nicely, it displays a new image on the 'next' or 'previous' button, (in a div called "MainImage") however, I am trying to add a function that will load a line of text in a div (called "xdiv") describing the picture.

<script language="JavaScript">
<!--
// Use the following variable to specify
// the number of images
var NumberOfImages = 3

var img = new Array(NumberOfImages)
img[0] = "image.jpg"
img[1] = "image1.jpg"
img[2] = "image2.jpg"



var imgNumber = 0

function NextImage()
{
imgNumber++
if (imgNumber == NumberOfImages)
imgNumber = 0
document.images["MainImage"].src = img[imgNumber]
}

function PreviousImage()
{
imgNumber--
if (imgNumber < 0)
imgNumber = NumberOfImages - 1
document.images["MainImage"].src = img[imgNumber]
}

//-->
</script>


this is what triggers it in the body:
<a href="javascript:PreviousImage()"><p><< previous project</p></a>
<a href="javascript:NextImage()"><p>next project >></p></a>

again, this script works like a charm, but I can't seem to even find a script that will call a different line of text on an event... so I am not even sure if I am trying to do something that is impossible?

I have no problem using something like an external text file attaching the name to the picture, I just have no idea how to attach it... It would be even better if I can attach some links to the text as well, or make the image clickable, but for now, I just want text to be displayed.

(oh and I have been playing with this a while, this is something that I just tried to see if it would work but it doesn't,)

<script language="JavaScript">
<!--
// Use the following variable to specify
// the number of images
var NumberOfDes = 3

var txt = new Array(NumberOfDes)
txt[0] = "text1"
txt[1] = "tetx2"
txt[2] = "tetx3"



var txtNumber = 0

function NextDescription()
{
txtNumber++
if (txtNumber == NumberOfDes)
txtNumber = 0
document.write["xDiv"].src = txt[txtNumber]
}

function PreviousDescription()
{
txtNumber--
if (txtNumber < 0)
txtNumber = NumberOfDes - 1
document.write["xDiv"].src = txt[txtNumber]
}

//-->
</script>

And even if it was close, how do I tie this in on the eventhandler?

Thanks for your time!

[magicyte]

Depends on if the <div>'s called "xdiv" in its "name" or "id". Supposing you gave <div> the id "xdiv":

<script type="text/javascript">
var NumberOfImages = 3; // obviously number of images desired

var img = new Array(NumberOfImages);
img[0] = "image.jpg";
img[1] = "image1.jpg";
img[2] = "image2.jpg";

var txt = new Array(NumberOfImages);
txt[0] = "Text for image 1 here.";
txt[1] = "Text for image 2 here.";
txt[2] = "Text for image 3 here.";

var imgNumber = 0;

function NextImage() {
  imgNumber++;
  if (imgNumber == NumberOfImages) {
    imgNumber = 0;
  }
  document.images["MainImage"].src = img[imgNumber];
  document.getElementById("xdiv").firstChild.nodeValue = txt[imgNumber];
}

function PreviousImage() {
  imgNumber--;
  if (imgNumber < 0) {
    imgNumber = NumberOfImages - 1;
  }
  document.images["MainImage"].src = img[imgNumber];
  document.getElementById("xdiv").firstChild.nodeValue = txt[imgNumber];
}
</script>

Hmm... Yes- that should do.

[03SF06]

so... the pictures still rotate properly but there's no text appearing in the div with the id "xdiv"...

[magicyte]

Please post a link to the page on your site that contains the problematic script so we can check it out. This helps us help you.

Try this:

<script type="text/javascript">
var NumberOfImages = 3; // obviously number of images desired

var img = new Array(NumberOfImages);
img[0] = "image.jpg";
img[1] = "image1.jpg";
img[2] = "image2.jpg";

var txt = new Array(NumberOfImages);
txt[0] = "Text for image 1 here.";
txt[1] = "Text for image 2 here.";
txt[2] = "Text for image 3 here.";

var imgNumber = 0;

function NextImage() {
  imgNumber++;
  if (imgNumber == NumberOfImages) {
    imgNumber = 0;
  }
  document.images["MainImage"].src = img[imgNumber];
  document.getElementById("xdiv").innerHTML = txt[imgNumber];
}

function PreviousImage() {
  imgNumber--;
  if (imgNumber < 0) {
    imgNumber = NumberOfImages - 1;
  }
  document.images["MainImage"].src = img[imgNumber];
  document.getElementById("xdiv").innerHTML = txt[imgNumber];
}
</script>

[03SF06]

Awesome! That did the trick! thanks a bunch!

[magicyte]

(Note that "innerHTML" is considered bad practice - I tried using firstChild.nodeValue, but apparently it didn't work. I have no idea as to why...)

Awesome! That did the trick! thanks a bunch!

No problem.