Applying transition to td - checkbox becomes uncheckable

Hey,

OK, got the following:


<script language="JavaScript">
function toggleform(whichAction){
document.form1.action=whichAction;
document.form1.submit();
}
function rollover(tableCell){
tableCell.filters["blendTrans"].Apply();
tableCell.style.backgroundColor='#3366CC';
tableCell.style.color='#FFFFFF';
tableCell.filters["blendTrans"].Play();
}
function rollout(tableCell){
tableCell.filters["blendTrans"].Apply();
tableCell.style.backgroundColor='#FFFFFF';
tableCell.style.color='#666666';
tableCell.filters["blendTrans"].Play();
}
</script>




<td width="20%" align="center" class="body" style="color:#666666;background-color:#FFFFFF; filter:blendTrans(duration=0.5);" onMouseover="rollover(this)" onMouseout="rollout(this)">Family Choice<br><img src="images/familychoice.jpg" width="30" height="30" alt="Family Choice" border="0"><br><input type="checkbox" name="U_FamChoice" value="Yes" onClick="toggleform('holidaysearch.asp')"></td>


The problem is is that I can't now check the checkbox - the rollover function seems to be interfering with the toggleform one. Any ideas?

split the cell <td> and put the checkbox in the other cell with no css style or with other name