This is a good subject for winter time. We used a selection of Orchids to show one example from hundreds of different ways to present a gallery on your web page.
This is a javascript based image gallery that displays larger versions of
thumbnail images dynamically when the mouse hovers over them.
A little trick is to give small and big thumbnails the same names with different
suffix. For example orchard1_small.jpg and orchard1_big.small.
Place all your small thumbnails inside of the container "imagegallery".
Javascript function "init()" will place all of your images into this container and
activate all necessary onmouseout and onmouseover event handlers.
Place this script in the <head> block of your page
Define your own style for the container where you will place the larger sized
thumbnail. In our case the CSS is similar to below:
Compose your HTML page. Please note - there is no sign of javascript in the HTML
block. If you remember the naming convention we agreed to above - just continue to
add your images inside of the <div> container "imagegallery"
If you don't like using javascript, you can find a purely CSS based solution at
http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/#thumb.
Unfortunately the solution, described in this article doesn't handle the "onClick" event.