Script to change large image on clicking thumb

[Joebscripting]

I have a web page with a table. Within this table I have a cell with another table that contains thumbnail images. I also have another cell within the main table that also contains a table. In that table is a cell in which I want to have an image appear when one of the thumbs is clicked. I wish to have a different image appear when another thumb is clicked. I have tried various scripts I've found and none work, including some DHTML somebody provided me.

Is there a problem with using an image link in one table to open an image in another table, particularly when the tables are embedded as described above?

If I can achieve my goal, could someone point me to a script that will do it, with detailed instructions on what goes where and what has to have what names changed, etc. At my age I'm finding it more difficult to figure stuff out myself then it used to be! :-)

Thanks in advance!

Joe

[felgall]

Take a look at my rollover gallery script
http://javascript.about.com/od/funwithimages/a/roll.htm

The script should work regardless of where the images are on the page because it uses the name attribute on the image to be replaced to identify it.

[Joebscripting]

It doesn't seem to be working for me. Here's what my coding looks like:

This is in the Head tags:

<script type="text/javascript" src="img.js"></script>

The img.js file is in the same folder as the web page and images, and looks like this:

if (document.images) {
image0 = new Image;
image1 = new Image;
image2 = new Image;
image0.src = 'photo0.jpg';
image1.src = 'photo1.jpg';
image2.src = 'photo2.jpg';
} else {
image0 = '';
image1 = '';
image2 = '';
document.rollimg = '';
}


The tags around my thumnail images look like this:

<td align="center"><span onmouseover="document.rollimg.src=image0.src;">
<img src="thumb0.jpg" width="101" height="102" alt="" border="0"></span></td>

The code for my default large image in the other table looks like this:

<td width="485"><img name="rolling" src="photo0.jpg" width="485" height="287" alt="" border="0"></td>

I get no results whatsoever when I mouse over the thumbnails.

Am I doing something wrong still?

Regards,

Joe

[Ransy23]

The code for my default large image in the other table looks like this:

<td width="485"><img name="rolling" src="photo0.jpg" width="485" height="287" alt="" border="0"></td>

It's been awhile since you laste posted, but if you still haven't figured it out, I hope I can help.

<img name="rolling" should be <img name="rollimg"

Notice the change from "n" to "m." Also, the script works best when you preload the large
images. Place this script in the head section. (Change the picture dimensions and add or take away however many photos you need.)


<script type="text/javascript">
<!--
if (document.images)
{
image0 = new Image(227, 291);
image0.src = "photo0.jpg";

image1 = new Image(98, 278);
image1.src = "photo1.jpg";

image2 = new Image(136, 277);
image2.src = "photo2.jpg";

image3 = new Image(227, 291);
image3.src = "photo3.jpg";
}
//-->
</script>