[+] click plus sign to load image on page below plus sign

[potentialgeek]

What's the best way to do this? I asked in the css forum, but they suggested it can't be done just with css.

I want larger images loading below a thumbnail or plus sign [+], instead of using pop-up windows, frames, or taking the user off the page (and needing to hit the back button). I don't want to use Flash and I don't want image swapping by pre-loaded larger images (file sizes are too large). The user must be able to save the loaded images.

What are the different ways to do this? And the pros/cons of each? Which way has the least amount of code, or is easiest to change on different pages?

p/g

[RonPK]

I'd probably append a new image element to the desired div in the existing markup. And set the src property of that new image.

function showPic(url, divID) { 
 var img = new Image(); 
 img.src = url; 
 document.getElementById(divID).appendChild(img); 
} 
... 
... 
<input type="button" value="click me" onclick="showPic('image.png', 'aDiv')"> 
<div id="aDiv"></div> 

You may want to add a check to prevent duplicate display of the image.