Script Categories

Menus and Navigation >>> Thumbnail Navigator.

Allows the visitor to easily browse with Previous and Next through several thumbnail images (all of which are preloaded so they show up instantly). Then they can click the Go button to be taken to the selected thumbnail's full size image.

Thumbnail Navigator

Browse to a picture you like and click "GO".

Step 1: Add the below code to the <body> section of your page:

<script language="javascript" type="text/javascript">      
/* Visit for full source code
and get more free JavaScript, CSS and DHTML scripts! */
<!-- Begin
prev1 = new Image (32,18);
prev1.src = "prev1.jpg";
prev2 = new Image (32,18);
prev2.src = "prev2.jpg";

next1 = new Image (32,18);
next1.src = "next1.jpg";
next2 = new Image (32,18);
next2.src = "next2.jpg";

go1 = new Image (48,24);
go1.src = "go1.jpg";
go2 = new Image (48,24);
go2.src = "go2.jpg";

maxPic = 4;

p1 = new Image (144,96);
p1.src = "chameleon-small.jpg";
link1 = "chameleon.jpg";

p2 = new Image (144,96);
p2.src = "gecko-small.jpg";
link2 = "gecko.jpg";

p3 = new Image (144,96);
p3.src = "lizard-small.jpg";
link3 = "lizard.jpg";

p4 = new Image (144,96);
p4.src = "toad-small.jpg";
link4 = "toad.jpg";

count = 1;
function next() {
if (count > maxPic) {
count = 1;
eval("document.p.src=p" + count + ".src");
function back() {
if (count == 0) {
count = maxPic;
eval("document.p.src=p" + count + ".src");
function link() {
location.href=eval("link" + count);
//  End -->
<table bgcolor="#003366" border=0>
align=center width=300>
<font color=white face="Arial, Helvetica" size="+1">Thumbnail Navigator</font>
<img name=p src="chameleon-small.jpg" border=0 width=144 height=96>
<table border=0>
<a href="javascript:back()" onmouseover="prev.src=prev2.src" onmouseout="prev.src=prev1.src"><img src="prev1.jpg"  width="32" height="18" border="0" name="prev"></td>
<a href="javascript:link()" onmouseover="go.src=go2.src" onmouseout="go.src=go1.src"><img src="go1.jpg" width="48" height="24" border="0" name="go"></td>
<a href="javascript:next()" onmouseover="next.src=next2.src" onmouseout="next.src=next1.src"><img src="next1.jpg" width="32" height="18" border="0" name="next"></td>
font color="#A3ACC9" size="2" face="Arial">
Browse to a picture you like and click "GO".</font>

Step 2: The script uses 14 images as part of its interface. You can create your own, or use the 14 below (resized for easier download):

(right click images, and select "Save Image As")
Upload them into the same directory as your webpage.

JavaScript Editor Get Advanced
JavaScript and Ajax Editor,
Validator and Debugger!

1st JavaScript Editor.

Code was highlighted by 1st JavaScript Editor (The Best JavaScript Editor!).