raingod >> resources >> JavaScript >> Software >> Thumbshow  

Thumbshow [Source]

Last updated: 06.08.2001

Source code for the Thumbshow script to display a set of images in a Web page. This script should be placed in the <HEAD> of the page in which you want to use it. The page must also contain an <IMG> tag whose NAME is "imagePoster", i.e.

<IMG NAME="imagePoster" WIDTH=200 HEIGHT=100 SRC="foo.gif">

Each thumbnail image should then contain an onClick() handler that calls the function loadPosterImage with the URL of the image to be loaded into the poster, i.e.

        <A HREF="bigpic/foo.jpg" 
            onClick="return(loadPosterImage('bigpic/foo.jpg'))">
        <IMG SRC="smallpic/foo.jpg"
                ALT="Foo" BORDER=0 ALIGN=TOP 
                WIDTH=60 HEIGHT=80></A>

The script is as follows:

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--

// canManipulateImages - check if the browser we're using can do
// clever stuff with document images.

function canManipulateImages() {
	if (document.images)
		return true;
	else
		return false;
}

// loadPosterImage

function loadPosterImage(imageURL) {
	if (gImageCapableBrowser) {
		document.imagePoster.src = imageURL;
		return false;
	}
	else {
		return true;
	}
}

// gImageCapableBrowser - is this browser hip to images? Set up
// a global variable so that we don't have to keep calling a function
// (useful if the function becomes costly to compute).

gImageCapableBrowser = canManipulateImages();

// -->
</SCRIPT>
[raingod:resources:javascript] -- [up][links][home]