HTML - Problem With Javascript On Xhtml

I have been creating a website with Javascript. When the user rolls over an image button, the button will glow and when the user presses on the button it will change to and image of the button being pressed. This program has been working with at least 6 buttons but the current button i'm working on stops doing what the previous buttons did and I would like to know why.

I copied the codes exactly the same as the previous buttons, changed the image picture and provided the correct links to each image but somehow it just stops working.

Thank you for your help (:

-=Example of the codes=-

Button 1:
<a href="'test2.htm" onMouseDown="pressButton('chatBtn');return true;" onMouseOver="overButton('chatBtn');return true;" onMouseOut="releaseButton('chatBtn');return true;"><img name=chatBtn src="images/chat.png" border="0" alt="Chat" /></a>

Button 2:
<a href='test.htm' onMouseDown="pressButton('backBtn');return true;" onMouseUp="overButton('backBtn');return true;" onMouseOut="releaseButton('backBtn');return true;"><img name=backBtn src="images/back.png" border="0" alt="Back" /></a>

Javascript code:
// Preloading Images
if (document.images)
{
chatBtn_up = new Image(); chatBtn_up.src="images/chat.png";
chatBtn_down= new Image(); chatBtn_down.src="images/chatPress.png";
chatBtn_hover = new Image(); chatBtn_hover.src="images/chatHover.png";

backBtn_up = new Image(); backBtn_up.src="images/back.png";
backBtn_down= new Image(); backBtn_down.src="images/backPress.png";
backBtn_hover = new Image(); backBtn_hover.src="images/backHover.png";
}

// Event Handlers for button
function pressButton(btName)
{
if (document.images)
eval('document.'+btName+'.src='+btName+'_down.src');
}

function releaseButton(btName)
{
if(document.images)
eval('document.'+btName+'.src='+btName+'_up.src');
}

function overButton(btName)
{
if (document.images)
eval('document.'+btName+'.src='+btName+'_hover.src');
}