PDA

View Full Version : Cant get captions to show in image gallery



aljohnstone
02-01-2006, 02:50 PM
Hi folks,

I am creating an image gallery using thumbnails that swap both the image and a caption from an array of images and an array of captions. I can get the caption to change in an alert() but not on the page. Can anyone offer some help.

here is the code

<HTML>
<HEAD>
<TITLE>swapimg</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- hide
var blurb = new Array();
blurb[0]="blurb1"
blurb[1]="blurb2"
blurb[2]="blurb3"
blurb[3]="blurb4"

var aryImages = new Array();
aryImages[0] = "images/rooiprt1-b.jpg";
aryImages[1] = "images/rooiprt1-c.jpg";
aryImages[2] = "images/rooiprt1-d.jpg";
aryImages[3] = "images/rooiprt1-e.jpg";

for (i=0; i < aryImages.length; i++) {
var preload = new Image();
preload.src = aryImages[i];
}


function swap(imgIndex) {
document['imgMain'].src = aryImages[imgIndex];
TheText = blurb[imgIndex];
alert(TheText);
}
// End -->
</script>


</HEAD>
<BODY onLoad="swap(0);">


<table border="0">
<tr>
<td valign="top" align="left">
<img name="imgMain" src="" border="0">
</td>
<td width="20">

</td>
<td valign="top" align="center" valign="top">
<font face="Tahoma" size="2"><b>Click to enlarge.</b></font>
<br>
<br>
<a href="javascript:swap(0)"><img src="rooiprt1-b-sml.jpg" border="0" width="60" height="42"></a>
<a href="javascript:swap(1)"><img src="rooiprt1-c-sml.jpg" border="0" width="60" height="42"></a>
<a href="javascript:swap(2)"><img src="rooiprt1-d-sml.jpg" border="0" width="60" height="42"></a>
<a href="javascript:swap(3)"><img src="rooiprt1-e-sml.jpg" border="0" width="60" height="42"></a>
<br>
<br>
<script language="JavaScript">document.write(TheText);</script>
</td>
</tr>
</table>
</BODY>
</HTML>

jscheuer1
02-01-2006, 07:51 PM
Change:


<script language="JavaScript">document.write(TheText);</script>

to:


<span id="blurbarea"></span>

and change:


alert(TheText);

to:


document.getElementById('blurbarea').innerHTML=TheText;

aljohnstone
02-02-2006, 02:51 AM
That works great.

Thank You