Mouseover Effect Not working . Help Needed

[finnstone]

OK. I need help. I have 6 buttons at the top of my web page. I would like for these buttons to change color when someone puts their mouse over them. For this reason, I have 2 instances of every button, they differ in color. For this reason, I am trying to create a mouseover effect - very simple, right, i thought it would be....

Here is my code, please let me know if i need to give more information , this is the minimal amount of code provided as possible.


FIRST MY JAVASCRIPTFIRST MY JAVASCRIPT

<script language="JavaScript">

if (document.images) {
quality Dep'ton = new Image();
quality Dep'ton.src="images/about_us_on.gif";

quality Dep'toff = new Image();
quality Dep'toff.src = "images/about_us_off1.gif";

our teamon = new Image();
our teamon.src="images/our_team_on.gif";

our teamoff = new Image();
our teamoff.src = "images/our_team_off2.gif";

six sigmaon = new Image();
six sigmaon.src="images/six_sigma_on.gif";

six sigmaoff = new Image();
six sigmaoff.src = "images/six_sigma_off.gif";

Projectson = new Image();
Projectson.src="images/projects_on.gif";

Projectsoff = new Image();
Projectsoff.src = "images/projects_off.gif";

linkson = new Image();
linkson.src="images/links_on.gif";

linksoff = new Image();
linksoff.src = "images/links_off.gif";

contact_uson = new Image();
contact_uson.src="images/contact_us_on.gif";

contact_usoff = new Image();
contact_usoff.src = "images/contact_us_off1.gif";


}

function imgOn(imageName) {
if (document.images) {
document[imageName].src = eval(imageName + "on.src");
}
}

function imgOff(imageName) {
if (document.images) {
document[imageName].src = eval(imageName + "off.src");
}
}

// -->
</script>

</HEAD>


NOW MY MOUSEOVER AFFECT CALLINGNOW MY MOUSEOVER AFFECT CALLING

THIS PART LOOKS MESSY, I KNOW THE ERROR IS IN THE MOUSEOVER OR NAME REFERENCE SO LOOK THERE FOR CLUES


<TD><IMG SRC="images/blank.gif" WIDTH="335" HEIGHT="20" BORDER="0"><A HREF="Quality Dep't.html"><IMG SRC="images/about_us_off1.gif" WIDTH="68" HEIGHT="20" BORDER="0" ALT="Quality Dep't" NAME="quality Dep't" onMouseOver="imgOn('quality Dep't')" ONMOUSEOUT="imgOff('quality Dep't')"></A><IMG SRC="images/blank.gif" WIDTH="33" HEIGHT="20" BORDER="0"><A HREF="our_team.html"><IMG SRC="images/our_team_off2.gif" WIDTH="98" HEIGHT="20" BORDER="0" ALT="Our Team" NAME="our_team" onMouseOver="imgOn('our_team')" ONMOUSEOUT="imgOff('our_team')"></A><IMG SRC="images/blank.gif" WIDTH="33" HEIGHT="20" BORDER="0"><A HREF="six sigma.html"><IMG SRC="images/six_sigma_off.gif" WIDTH="94" HEIGHT="20" BORDER="0" ALT="Six sigma" NAME="six sigma" onMouseOver="imgOn('six sigma')" ONMOUSEOUT="imgOff('six sigma')"></A><IMG SRC="images/blank.gif" WIDTH="33" HEIGHT="20" BORDER="0"><A HREF="projects.html"><IMG SRC="images/projects_off.gif" WIDTH="89" HEIGHT="20" BORDER="0" ALT="Projects" NAME="Projects" onMouseOver="imgOn('Projects')" ONMOUSEOUT="imgOff('Projects')"></A><IMG SRC="images/blank.gif" WIDTH="30" HEIGHT="20" BORDER="0"><A HREF="links.html"><IMG SRC="images/links_off.gif" WIDTH="57" HEIGHT="20" BORDER="0" ALT="links" NAME="links" onMouseOver="imgOn('links')" ONMOUSEOUT="imgOff('links')"></A><IMG SRC="images/blank.gif" WIDTH="33" HEIGHT="20" BORDER="0"><A HREF="contact_us.html"><IMG SRC="images/contact_us_off1.gif" WIDTH=90" HEIGHT="20" BORDER="0" ALT="Contact Us" NAME="contact_us" onMouseOver="imgOn('contact_us')" ONMOUSEOUT="imgOff('contact_us')"></A></TD>THIS PART LOOKS MESSY, I KNOW THE ERROR IS IN THE MOUSEOVER OR NAME REFERENCE SO LOOK THERE FOR CLUES

[beetle]

spaces and apostrophes aren't allowed in variable names...as in

quality Dep'ton = new Image();
quality Dep'ton.src="images/about_us_on.gif";

Should be

var quality_Depton = new Image();
quality_Depton.src="images/about_us_on.gif";