What Javascript to use to click on an image and make it appear larger in the middle of the page?

Question

I want to display my artwork on my webpage. I want to have it so on the left hand side are small images of my work and in the middle will be a large area. When the viewer clicks on the small image (or rolls over it), the large image of the piece will be in the large box in the middle. What javascript code should I use?

Answer 1

http://www.dougv.com/blog/2007/02/07/showing-a-larger-image-from-a-thumbnail-onclick-via-javascript-dom/

Answer 2

First, you need two images for each picture - one small, one large. Display the small ones in a table. Put the larger ones into individual tables, with a style that places them off screen - they will not be visible. For the small images, use an "onclick" function to change the style of the associated table to one that places it in the middle of the page.

here is the style definition that puts the table off screen:
.offscreen {position: absolute; top: -1400; left: -1400;}

Another option is to create a new popup window when the small image is clicked, using the larger image as the content.

Answer 3

Easy option is to use the overlay function present in the YUI libraries by Yahoo.

You can specify what to add in the overlay (page, image etc) and the overlay can be made to display as a modal window etc.

See the link below for samples.
http://developer.yahoo.com/yui/container/overlay/

We use this functionality on a number of our image library sites to great effect.

You could also look at using the "Lightbox" script. see below:
http://www.huddletogether.com/projects/lightbox/

Answer 4

You could use a onMouseOver or onClick event in the smaller image source code that loads the image into a corresponding