There are a number of ways to accomplish this depending on how you want the box model to behave. That is, do you want the page content to re-flow or remain fixed. Assuming the later, you will need an initial image to occupy the target area where you want the other pictures to be displayed. You can then write a function to replace the source attribute of the target image tag (imgName) with the selected full-size image path (imgPath).
// assuming no pre-load functions ran
function changeImage(imgName,imgPath) ( <-- should be left 'open' brace
document.images[imgName].src = imgPath;
}
If you do have pre-load functions, then change imgPath to use the src attribute of the image you want to use.
Also, you need to make sure that your target image dimensions are the same for all the images to prevent resizing, unless you enclose the target area within a fixed-size div tag, or change the target image height/width style attributes as well. Note that the later may cause the page to re-flow the content.
Just my
