//====================================================================
//Script:  Active Tri-State Roll-Over Images on Form Submit and Reset
//         Script Boilerplate and Quick-Take Tutorial
//Source:  (C) 2001 by CodeLifter.com at http://www.codelifter.com
//Author:  etLux
//Desc.:   This script shows how to use tri-state rollover images with
//         forms, instead of the usual rather unattractive 'gray
//         buttons' for Submit and Reset.
//Use:     All version 4.x and later browsers
//====================================================================
//INSTRUCTIONS:
//Copy and paste this entire presentation into a blank page.  Detailed
//instructions and tutorial comments are included within the script.
//There is no extraneous code in the presentation, other than the
//comments.
//Don't let the length of this example throw you.  The real code is
//very short -- the comments and explanations make up the bulk of this
//presentation.

// ===== Set Up =========================================================
// Preload the images to be used with the form
// ======================================================================
// (Don't touch the next line; it declares the image array.)
var Pic = new Array

// Place the names of the images into the array below. Watch how the
// image 'buttons' perform to see which image is which.
// The numbers in the array below will equate to the images  to be called
// by the switchImage() function, further below.

Pic[0] = 'images/main.gif'
Pic[1] = 'images/main-msovr.gif'
Pic[2] = 'images/download.gif'
Pic[3] = 'images/download-msovr.gif'
Pic[4] = 'images/guide.gif'
Pic[5] = 'images/guide-msovr.gif'
Pic[6] = 'images/contact.gif'
Pic[7] = 'images/contact-msovr.gif'
Pic[8] = 'images/updates.gif'
Pic[9] = 'images/updates-msovr.gif'

// ===== Main Program ===================================================
// Read the comments within before editing anything below this line.
// ======================================================================
// ----------------------------------------------------------------------
// This section of code preloads the images you named in the Pic[] array
// above, so images will be ready as soon as the page opens.
var p = Pic.length
var preLoad = new Array()
var i = 0;
for (i = 0; i < p; i++){
     preLoad[i] = new Image()
     preLoad[i].src = Pic[i]
}
// ----------------------------------------------------------------------
// The next very short function, switchImage(whichImage,imageNumber),
// handles all image switching in response to mouseOver, mouseOut, and
// mouseDown events.
// The variable whichImage carries the *name* of the image to be
// switched (see the comments in the HTML below) -- in this case, either
// 'resetImage' or 'submitImage'.
// The variable imageNumber carries the number of the image to be called,
// as per the numbers in the Pic[] array up above.
// Read the HTML code comments below to see how to attach this function
// to the images. Note that it's actually hooked to <a href> tags around
// the images, rather than to the images themselves, since NS4 does not
// allow attaching events to images.
function switchImage(whichImage,imageNumber){
   document.images[whichImage].src = preLoad[imageNumber].src
}