Multiple Image Gallery Caption Help Needed

[risingPhoenix]

I created a thumbnail image gallery at http://mattjennings.net/002natalie/gallery/comm-gallery.html that uses a DOM script to give 1 caption to a big, placeholder image each time a thumbnail is clicked. I want to add 2 additional captions (for a total of 3 captions) to the placeholder image each time a thumbnail is clicked.



Below is my DOM script:



//gallery-natalieTEST.js
//JAVASCRIPT HELPS CREATE A THUMBNAIL IMAGE GALLERY W/CAPTIONS FOR THE "PLACEHOLDER" IMAGE
//JAVASCRIPT USES THE DOM TO CREATE THE IMAGE GALLERY

//JAVASCRIPT ADAPTED FROM http://host.sonspring.com/domgallery/
//& THAT CODE WAS ADAPTED FROM BOOK TITLED "DOM SCRIPTING" BY JEREMY KEITH,
//ISBN: 1-59059-533-5

function showPic(whichpic) {
if (!document.getElementById("placeholder")) return true;
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",source);
if (!document.getElementById("description")) return false;
if (whichpic.getAttribute("title")) {
var text = whichpic.getAttribute("title");
} else {
var text = "";
}

var description = document.getElementById("description");
if (description.firstChild.nodeType == 3) {
description.firstChild.nodeValue = text;
}

return false;
}

function prepareGallery() {
if (!document.getElementsByTagName) return false;
if (!document.getElementById) return false;
if (!document.getElementById("showcase")) return false;
var gallery = document.getElementById("showcase");
var links = gallery.getElementsByTagName("a");
for ( var i=0; i < links.length; i++) {
links[i].onclick = function() {
return showPic(this);
}
links[i].onkeypress = links[i].onclick;
}
}

function showCap(whichcap) {
if (!document.getElementById("placeholder")) return true;
if (!document.getElementById("description")) return false;
var description = document.getElementById("description");
if (description.firstChild.nodeType == 3) {
description.firstChild.nodeValue = text;
}
return false;
}

function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}

addLoadEvent(prepareGallery);



Below is a portion of my XHTML that the DOM script above is accessing:



<img id="placeholder" src="../images/img201-md.jpg" width="400" height="300" alt="Starbucks Tower (SoDo)" />

<div id="description">Starbucks Tower (SoDo)</div>
<h4 id="description2">Oil on Canvas, 21&quot; X 35&quot;</h4>
<h5 id="description3">Original Painting: Available for Sale at <a href="http://www.etsy.com/">Etsy.com</a></h5>

<!-- LEFT end DIV -->
</div>

<div id="right-gallery">

<div id="gall-h1">Commercial Buildings Gallery</div><br />

<div id="showcase">

<ul id="imagegallery">

<li><a href="../images/img201-md.jpg" title="Starbucks Tower (SoDo)"><img src="../images/img201-sm.jpg" alt="Starbucks Tower (SoDo)" width="80" height="60" /></a><div>Oil on Canvas, 21" X 35"</div><span>Original Painting: Available for Sale at <a href="http://www.etsy.com/">Etsy.com</a></span></li>



I want to use a DOM script to take first access the <li> tag above, and then the text in the <div> tag and <span> tag. Then I want to through that text into the <h4 id="description2"> tag and <h5 id="description3"> tag for the 2 additional captions.

How do I do this? Any help is appreciated!:)

[vwphillips]

function showPic(whichpic) {
if (!document.getElementById("placeholder")) return true;
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",source);
var description = document.getElementById("description");
if (!description) return false;
var text = ['','',''];
if (whichpic.getAttribute("title")) {
text=whichpic.getAttribute("title").split(',');
}
var flds=description.getElementsByTagName('DIV')
flds[0].innerHTML=text[0]||'';
flds[1].innerHTML=text[1]||'';
flds[2].innerHTML=text[2]||'';
return false;
}



and

<li><a href="../images/img201-md.jpg" title="Starbucks Tower (SoDo), Line 2, Line 3"><img src="http://mattjennings.net/002natalie/gallery/../images/img201-sm.jpg" alt="Starbucks Tower (SoDo)" width="80" height="60" /></a><div>Oil on Canvas, 21" X 35"</div><span>Original Painting: Available for Sale at <a href="http://www.etsy.com/">Etsy.com</a></span></li>