ThumbShow

Last updated: 08.05.2002


Naiad

Naiad Beauty Products

Adonis

Bronze Adonis

Naiad
Rodin

Rodin Consulting

Swami

Swami Academy

Passion

Plastic Passion

Atlas

Atlas Removals


Something for a product catalog? This JavaScript lets you click on thumbnails to display full-size images on the same page. The clever part is that if your browser doesn't allow you to get or set elements of the documentimages array - or doesn't even have JavaScript - then it will still do something intelligent. If the browser can manipulate document images, then it simply in-lines the large image. If it can't, or if it doesn't recognise JavaScript at all, it will simply display the image by itself, in a new page.

The key to this is the loadPosterImage() function. Each of the small thumbnail images below is set up as an anchor to the corresponding large image. However, an onClick() handler is also defined, which invokes loadPosterImage(). If the browser accessing the page isn't JavaScript-capable, it won't process the handler at all, so a click will take the user directly to the image in a new page. If the browser can handle JavaScript, but can't manipulate the documentimages array (as determined by the canManipulateImages() function) then loadPosterImage() returns true, which lets the browser know it should process the click. Same story. If, however, the browser can do things with the document images, then loadPosterImage() replaces the current poster image by the new image, and returns false, telling the browser not to do any further click processing. Not bad, huh?


* Source Code

Images, incidentally, were produced with Fractal Poser 1.0, Adobe PhotoShop 3.0.5, KPT Bryce 2.1 and Kai's Power Tools 3.0. Any resemblance to any existing trademarks or companies is entirely coincidental.

[raingod:resources:javascript] -- [previous][up][next][links][home]