In-line Image Viewer

This script shows how to display different images without going to another page, visitors can click links to change the displayed image in the current page.

Requested by David Cook (www.dckook.co.uk)

Example

Image 1 Image 2 Image 3 Image 4 Image 5

Source Code

The changeImage function - this is responsible for changing the image in the image tag, you should include this code in the head section of your html page.

<script>
function changeImage(filename)
{
   document.mainimage.src = filename;
}
</script>


The links - each image needs its own link to allow your visitors to select it, you can include the links in any part of the body section of you html page and there is no limit to haw many links you can include. The image names are case sensitive so be careful when your typing them in.

<a href="javascript:changeImage('image1.jpg')">Image 1</a>
<a href="javascript:changeImage('image2.jpg')">Image 2</a>
<a href="javascript:changeImage('image3.jpg')">Image 3</a>
<a href="javascript:changeImage('image4.jpg')">Image 4</a>


The image tag - this is the tag that displays the images, you should include it somewhere in the body section of your page, you only need one img tag.

<img name="mainimage" src="blank.jpg">


Download Script