swap images for form button

[dumdumsareyum]

I would like to change the image i'm using for a form button when it's moused over (I would like it to match my navigation link buttons)  I was trying something like this:

<input type="image" src="images/button-addCart.gif" alt="Add to Cart" title="Add to Cart" name="cartButton" id="cartButton" onMouseOver="change_it('cartButton', 'cartButtonHover')">

 

where the "change_it" function looks like this:

function change_it(initial, swap)
   {
    if(document.images)
     {
     document.images[initial].src=eval(swap + ".src");
     }
    }

 

 

but using it for an image link....so, is there a way to do this for a form button img instead of a link? or with css?

[Psycho]

Change the function calls to the format (this, 'path/to/image.gif')

 

<input type="image" src="images/button-addCart.gif" alt="Add to Cart"
       title="Add to Cart" name="cartButton" id="cartButton"
       onMouseOver="change_it(this, 'images/cartButton.gif')"
       onMouseOut="change_it(this, 'images/button-addCart.gif')">

 

function change_it(fieldObj, imgSrc)
{
    if(document.images)
    {
        fieldObj.src = imgSrc;
    }
}