CSS Rollover Flicker in IE

Does anyone know to modify and preferably simplify this code in order to prevent the flicker from occurring in IE? Perhaps there is no need for the javascripts? I'm a bit confused...

Thanks for any help...


<style type="text/css">
input.creditcard
{
width: 128px;
height: 36px;
background-color: #EEEEEE;
background-image: url(ccb1_01.png);
position: absolute;
}

</style>

<script language="javascript">

function goLite(FRM,BTN)
{
window.document.forms[FRM].elements[BTN].style.backgroundImage = "url(ccb1_02.png)";
}

function goDim(FRM,BTN)
{
window.document.forms[FRM].elements[BTN].style.backgroundImage = "url(ccb1_01.png)";
}
</script>


<style type="text/css">

input.paypal
{
width: 112px;
height: 36px;
background-color: #EEEEEE;
background-image: url('pp1_01.png');
position: absolute;
}

</style>

<script language="javascript">

function goLite1(FRM,BTN)
{
window.document.forms[FRM].elements[BTN].style.backgroundImage = "url(pp1_02.png)";
}

function goDim1(FRM,BTN)
{
window.document.forms[FRM].elements[BTN].style.backgroundImage = "url(pp1_01.png)";
}

</script>


<input type="submit" name="payclass" class="creditcard" value=""
onMouseOver="goLite(this.form.name,this.name)"
onMouseOut="goDim(this.form.name,this.name)" style="left: 528px; top: 63px" id="ccsubmit"/>


<input type="submit" name="paypal" class="paypal" value=""
onMouseOver="goLite1(this.form.name,this.name)"
onMouseOut="goDim1(this.form.name,this.name)" style="left: 545px; top: 112px; height: 36px;" id="ppsubmit"/>