first of all, this is a javascript question, not a java question. the only similarity between the two is that the latter is a proper subset of the former in name only.
Basically what you need to do is name your large image, then change your onclick to swap the images. so if you change this:
Code:
<img src='imgs/rail_def.jpg'>
to
Code:
<img src='imgs/rail_def.jpg' name='master'>
Now you have named the master image and can use javascript to alter this image. so your tnail links will change to
Code:
<a href="#" onClick="document.master.src='imgs/rail1.gif';" class="popimage"><img src='imgs/thumbs/rail1.jpg' class='popimage'></a>
This is a little quick and dirty. The best thing to do would be to implement a preloader so the images will swap in quickly. Put something like this in your body tag:
Code:
<body onLoad="doPreload();">
then something like this in your javascript file or in the page:
Code:
function doPreload()
{
var images = new Array('images/rail1.gif','images/rail2.gif', 'images/rail3.gif');
preload(images);
}
function preload(img_arr) {
for(var loop = 0; loop < img_arr.length; loop++)
{
var image = new Image();
image.src = img_arr[loop];
}
}
this will cache all the large images so they wont have to download from the server once they are called for. You dont have to reference any of the variables here, you can just use the image name to load them. Probably if i was you, I would alter these functions so you can pass the image names to the preload function and generate your javascript with php on the fly.