//this string is used to simplify code later, to rebuild image names by just
//appending a number, instead of writing out the whole image name.
var imageString = "nav";

//Create the array of "off" images. 
var offImageNames = new Array(
    "http://north.gpschools.org/Images/Nav/nav1.gif",
    "http://north.gpschools.org/Images/Nav/nav2.gif",
    "http://north.gpschools.org/Images/Nav/nav3.gif",
    "http://north.gpschools.org/Images/Nav/nav4.gif");

//create array of "on" image names, which are what will appear when mouse runs over
//the off image.
var onImageNames = new Array(
    "http://north.gpschools.org/Images/Nav/nav1_over.gif",
    "http://north.gpschools.org/Images/Nav/nav2_over.gif",
    "http://north.gpschools.org/Images/Nav/nav3_over.gif",
    "http://north.gpschools.org/Images/Nav/nav4_over.gif");

//declare arrays to hold the actual images themselves (not just their names as above)
var onImages = new Array();
var offImages = new Array();

//now populate these image arrays. For example, on the first iteration of the for loop,
//i is equal to 0, so onImages[0] will be set to contain the path to onImageNames[0],
//which in our example is "http://north.gpschools.org/Images/Nav/nav1_over.gif"
if (document.images) {
        for (var i=0; i<offImageNames.length; i++) {
                onImages[i] = new Image(); onImages[i].src = onImageNames[i];
                offImages[i] = new Image(); offImages[i].src = offImageNames[i];
        }
}

function RollOver(menuIndex) { 
        if (document.images) {
                document.images[imageString + menuIndex].src = onImages[(menuIndex-1)].src;

        }
}

function RollOff(menuIndex, swapCenterIndex) { 
        if (document.images) {
                document.images[imageString + menuIndex].src = offImages[(menuIndex-1)].src;

        }
}