Webpage photo gallery

The following JavaScript code is designed to present a selection of images as thumbnails with a bigger preview version displayed on mouse-over.

Screenshot of image gallery with thumbnails

A number of CSS 'classes' are used to shape the behaviour of the mouse and the design of the overall webpage:

1. .thumbnails img - to create the selection of 5 small images above the main larger one.
2. .thumbnails img:hover - creates the blue border effect when the mouse is over one of the small images.
3. .preview img - to create the larger preview image below the thumbnail versions.

A 'div' is created to contain the main preview image and assign the above .preview class. We then specify the default image to load with the webpage and give it the name preview - which we will call upon later when swapping out the preview image for another.

<div class="preview" align="center">
     <img name="preview" src="img1.jpg" />
</div>

In order to change the main preview image when a different thumbnail is selected we need to implement the 'onmouseover' event to change the image source. Here is where we call the name preview from above in order to do this. Note the code is repeated for all 5 images.

<img onmouseover="preview.src=img1.src" name="img1" src="img1.jpg" />

Webpage photo gallery.zip