[SOLVED] How to load pictures instantly?

[jpmad4it]

hey everyone,

 

I want to find out if its possible to load an image dynamically on the click of a button, within the same webpage. For example I want to have a thumbnail which has a link to a larger image, which will be loaded without having to open up a pop-up or separate page. I'd have 4 or 5 thumbnails at the top of the page, and then a larger area below that where the larger image is loaded on the click of the thumbnail. Is this possible? How could it be done? I know this is probably a relatively easy question, so sorry for being a newbie LOL 

 

regards Jp

[wildteen88]

Not php for this. Just a bit of javascript. Hop over to dynamicdrive.com for such a script. If I remember correctly they have plenty of image loading scripts.

[jpmad4it]

ah ok cool, sorry for posting in the wrong thread !!

[mainewoods]

create your larger image tag like this:

<img src="start image url" id="largepic"> 

code each of your thumbnail pics like this:

<a href="#" onclick="document.getElementById('largepic').src='new pic url';return false;"><img src="one thumbnail url"></a>

--notice the onclick event coded into the link code.  It getElementById's the id of the large image and then replaces the src attribute of that image with the new large picture url.  Just code the link for each thumbnail the same except use a different 'new pic url'.  Pay close attention to the use of single quotes and double quotes in the onclick=.

[jpmad4it]

wicked thanks a million!