//this preloads the images for the rollover //
thumb1on = new Image();
thumb2on = new Image();
thumb3on = new Image();
thumb4on = new Image();
thumb5on = new Image();
thumb1off = new Image();
thumb2off = new Image();
thumb3off = new Image();
thumb4off = new Image();
thumb5off = new Image();
// create image objects //
thumb1on.src="images/home_select.png";
thumb2on.src="images/products_select.png";
thumb3on.src="images/pitching_select.png";
thumb4on.src="images/resources_select.png";
thumb5on.src="images/contact_select.png";
thumb1off.src="images/home.png";
thumb2off.src="images/products.png";
thumb3off.src="images/pitching.png";
thumb4off.src="images/resources.png";
thumb5off.src="images/contact.png";
// set the source for those objects //

function rollOver(img) {																																																																																															
var allImgs = document.getElementById("menu").getElementsByTagName("img");
butOn = eval(img+"on.src");
// eval short for evaluate forces javascript to figure out what it means. In this case to use the image src, not just keep it as a string (ex. 
// uses images/thumb1roll.jpg instead of keeping it the string thumb1on.src		
document.getElementById(img).src = butOn;
}

function rollOut(img) {																																
var allImgs = document.getElementById("menu").getElementsByTagName("img");
butOff = eval(img+"off.src");
document.getElementById(img).src = butOff;
}