Coding Help!
 

Hi,

I am looking for a way to have thumbnails on a page and when they are clicked it displays a larger image underneath the row of thumbnails. So basically, the surfer does not need to leave the page to view a bigger version of the picture. If you guys buy stuff on Ebay, it is used there a lot when they show pictures of the item. Can someone direct me to a site or script that shows how to do this.

Thanks

bump-help please

ICQ me... 124127828

I guess you'd just have to do <img name=whatever> then the script would be like <a href="hahahahahahahahahaha:whatever.src='theimage. jpg';>

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 :2 cents: