Javascript Image Rollover

I'm working with four buttons and I want to use the hover effect for when the mouse is over the button. I have a content editor for the buttons and one for the script. My script is the first source code below and my button html is the second. Right now, only the first button is working correctly and I can't figure out why.

​<script language="JavaScript" type="text/javascript">
<!--
if (document.images) {
    homebuttonup       = new Image();
    homebuttonup.src   = "/SiteAssets/SitePages/NewHomePage/helpdesk.png" ;
    homebuttondown     = new Image() ;
    homebuttondown.src = "/SiteAssets/SitePages/NewHomePage/heldeskpush.png" ;

    sarbuttonup       = new Image();
    sarbuttonup.src   = "/SiteAssets/SitePages/NewHomePage/submit-sar-request.png" ;
    sarbuttondown     = new Image() ;
    sarbuttondown.src = "/SiteAssets/SitePages/NewHomePage/submit-sar-requestpush.png ;

    collectionbuttonup       = new Image();
    collectionbuttonup.src   = "/SiteAssets/SitePages/NewHomePage/request-site-collection.png" ;
    collectionbuttondown     = new Image() ;
    collectionbuttondown.src = "/SiteAssets/SitePages/NewHomePage/request-site-collectionpush.png" ;

    externalbuttonup       = new Image();
    externalbuttonup.src   = "/SiteAssets/SitePages/NewHomePage/request.png" ;
    externalbuttondown     = new Image() ;
    externalbuttondown.src = "/SiteAssets/SitePages/NewHomePage/requestpush.png" ;

}
function buttondown( buttonname )
{
    if (document.images) {
      document[ buttonname ].src = eval( buttonname + "down.src" );
    }
}
function buttonup ( buttonname )
{
    if (document.images) {
      document[ buttonname ].src = eval( buttonname + "up.src" );
    }
}

// --></script> 

Html

<div>&#160; <a onmouseover="buttondown(&#39;homebutton&#39;)" onmouseout="buttonup(
&#39;homebutton&#39;)" href="http://cor089a115/CAisd/pdmweb.exe" target="_blank">

<img name="homebutton" alt="buttonCATL5OJR.png" src="/SiteAssets/SitePages
/NewHomePage/helpdesk.png" style="border-right-width: 0px; margin: 5px; 
border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px"/>
</a>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span>

<a onmouseover="buttondown(&#39;sarbutton&#39;)" onmouseout="buttonup(&#39;sar
button&#39;)" href="https://cor089a38:7002/im" target="_blank">

<img name="sarbut
ton" alt="buttonCAMKFA2D.png" src="/SiteAssets/SitePages/NewHomePage/submit-sar-r
equest.png" style="border-bottom: 0px solid; border-left: 0px solid; margin: 5px;
 border-top: 0px solid; border-right: 0px solid"/></a>
</span>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&
#160;&#160; <span>

<a onmouseover="buttondown(&#39;collectionbutton&#39;)" onmouseout="buttonup
(&#39;collectionbutton&#39;)" href="/Lists/Site%20Collection%20Requests/NewFor
m.aspx?RootFolder=">

<img name="collectionbutton" alt="buttonCA7HRNK0.png" src="/SiteAssets/SitePa
ges/NewHomePage/request-site-collection.png" style="border-bottom: 0px solid;
 border-left: 0px solid; margin: 5px; border-top: 0px solid; border-right: 0p
 x solid"/></a></span>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&
 #160;&#160;&#160;

<a onmouseover="buttondown(&#39;externalbutton&#39;)" onmouseout="buttonup(&
#39;externalbutton&#39;)" href="/Lists/External%20Access%20Requests/NewForm.
aspx?RootFolder="> 

<img name="externalbutton" alt="buttonCAAEW5F5.png" src="/SiteAssets/SitePages
/NewHomePage/request.png" style="border-bottom: 0px solid; border-left: 0px so
lid; margin: 5px; border-top: 0px solid; border-right: 0px solid"/></a></div>