Onhover text replace

[th88]

Hi all.

I already havea javascript function that updates an image when the thumbnail is hovered over. Now I would like to add a caption to the image, so that when the thumbnail is hovered over, the relevant caption is displayed in the "caption" div below. I have four thumbnails, each with different captions.


My function so far:

<script type="text/javascript">
function update(url,index,isSuper)
{
document['PhotoBig'].src=url;
}
</script>

Thumbnail div:

<div id="thumbnail">
<a onMouseOver="update('images/educational/img1-large.jpg', 0, false); return false;">
<img src="images/educational/img1.jpg">
</a>
</div>

Large image div:

<div id="large">
<img src="images/educational/img3-large.jpg" name="PhotoBig">
<div id="caption">WANT CAPTION TO GO HERE</div>
</div>


Any help appreciated!

Many thanks.

[ZeroKilled]

var img = [];
img.push('images/educational/img3-large.jpg, caption for this image');
img.push('images/educational/img2-large.jpg, caption for this image');
img.push('images/educational/img4-large.jpg, caption for this image');

function update(which){
document['PhotoBig'].src=img[which].split(', ')[0];
document.getElementById('caption').innerHTML = img[which].split(', ')[1];
}

the HTML is:
<a onMouseOver="update(0);">
<img src="images/educational/img1.jpg">
</a>

notice that in this sample i create an array that contain a string. each entry is composed of the image url separated with a comma and a white space followed by the caption. i would prefer this approach, so you don't have to go different part of the document when you want to update which image to show. if you want to change an image position on the array, you simply move the line img.push(...) to the desired position.

[th88]

A follow up:

Works fine.

However, I can't put any commas in the caption area as it stops the text

i.e.

This is a, test

displays:

This is a

How can I encode commas so it doesn't assume that it's reached the end of the statement prematurely.

Thanks!