Hello,

I have the following block of code that changes an image when a link is rolled over. I just call each function with onMouseOver and onMouseOut. I am sure there is a better way to do this, what do you suggest?

Code:
//this function find the particular image within the document and swaps an //image
function swapImage1() {
	var newImage = document.getElementById('aboutPic'); //finds image
	newImage.src="images/about.jpg"; //replaces image
}

function restore1() {
	var oldImage = document.getElementById('aboutPic'); //finds image
	oldImage.src="images/aboutBW.jpg"; //replaces it with original
}
function swapImage2() {
	var newImage = document.getElementById('peoplePic');
	newImage.src="images/people.jpg";
}

function restore2() {
	var oldImage = document.getElementById('peoplePic');
	oldImage.src="images/peopleBW.jpg";
}
function swapImage3() {
	var newImage = document.getElementById('resourcesPic');
	newImage.src="images/resources.jpg";
}

function restore3() {
	var oldImage = document.getElementById('resourcesPic');
	oldImage.src="images/resourcesBW.jpg";
}
function swapImage4() {
	var newImage = document.getElementById('newsPic');
	newImage.src="images/news.jpg";
}

function restore4() {
	var oldImage = document.getElementById('newsPic');
	oldImage.src="images/newsBW.jpg";
}
function swapImage5() {
	var newImage = document.getElementById('contactPic');
	newImage.src="images/contact.jpg";
}

function restore5() {
	var oldImage = document.getElementById('contactPic');
	oldImage.src="images/contactBW.jpg";
}
Thank you