javascript - Add to existing older slideshow script to include a caption for images -

i'm wondering if there small change or addition make existing script, add captions images in slideshow, or if should abandon old script , start fresh. i'm new beginner javascript please bare me. there 2 pages- intro page , slideshow page. intro page has small thumbnail images when clicked take visitor slideshow page see large version of thumbnail, , there visitor can click through large thumbnail-representive images or go intro page.

here's intro page (relevant part):

<table>    <tr>     <td><a href="arbor-viewer-test-files.html?img=0">      <img src="images/thumbnails/arbor_0.jpg" width="100" />      </a></td>     <td><a href="arbor-viewer-test-files.html?img=1">      <img src="images/thumbnails/arbor_1.jpg" width="100" />      </a></td>     <td><a href="arbor-viewer-test-files.html?img=2">      <img src="images/thumbnails/arbor_2.jpg" width="100" />      </a></td>     <td><a href="arbor-viewer-test-files.html?img=3">      <img src="images/thumbnails/arbor_3.jpg" width="100" />      </a></td>     <td><a href="arbor-viewer-test-files.html?img=4">      <img src="images/thumbnails/arbor_4.jpg" alt="dfw patio cover arbors" border="0" width="100" />      </a></td>    </tr>   </table> 

and here's slideshow page (relevant part):

<table border="0">           <tr>             <td align="center">               <p class="center largep bold"> <a href="javascript:chgimg(-1)">previous</a> | <a href="javascript:auto()">auto/stop</a> | <a href="javascript:chgimg(1)">next</a> <br />                 <a href="/arbors.htm">return arbor gallery</a> </p>               <br />             </td>           </tr>           <tr>             <td align="center"> <br />               <img src="images/arbor_0.jpg" name="slideshow" />               <br />             </td>           </tr>         </table> <script type="text/javascript"> showimg(querystring.img); </script> </body> 

and here's script:

var newimg = new array(); newimg[0] = "images/arbor_0.jpg"; newimg[1] = "images/arbor_1.jpg"; newimg[2] = "images/arbor_2.jpg"; newimg[3] = "images/arbor_3.jpg"; newimg[4] = "images/arbor_4.jpg";  function obj_querystring(){ qs = document.url.substring(document.url.indexof('?')+1,document.url.length); queries = qs.split(/\&/); for(i=0;i<queries.length;i++){      query = queries[i].split(/\=/);     this[query[0]] = unescape(query[1]);}  }  querystring = new obj_querystring(); var imgnum = 0; var imglength = newimg.length - 1; //delay betwn slides in millisecs var delay = 3000; var lock = false; var run;  function showimg(imgnum){ document.slideshow.src = newimg[imgnum]; }  function chgimg(direction) { if (document.images){     imgnum = imgnum + direction;     if (imgnum > imglength)          imgnum = 0;     if (imgnum < 0)          imgnum = imglength;     document.slideshow.src = newimg[imgnum];} }  function auto(){ if (lock == true) {     lock = false;     window.clearinterval(run);} else if (lock == false) {     lock = true;     run = setinterval("chgimg(1)", delay);}  } 

the best come adding script:

//under newimg array: var caption = new array();   caption[0] = "caption first image";  caption[1] = "caption second image";  caption[2] = "caption third image";  caption[3] = "caption fourth image";  caption[4] = "caption fifth image"; 

and adding snippet along function @ bottom of slideshow page (everything else same above):

<p id="captiondiv><br /></p> <script type="text/javascript"> showimg(querystring.img); document.getelementbyid("captiondiv").innerhtml=caption[imgnum]; </script> 

…which shows caption[0] , doesn't change along images. i'm sure solution no-brainer knows more javascript do. i've researched , studied online on week , still don't understand do. need javascript interpreter! way, thank if you've read far , have offer. -amanda

you can put document.getelementbyid("captiondiv").innerhtml=caption[imgnum]; inside function showimg(imgnum) can relevent image caption.