I've written this script to associate multiple classes to an item onMouseover but it keeps coming up with an error and I can't work out why - can anyone help?

Code:
<html>
<head>
<title>Mouseover Buttons</title>
<style type="text/css">
<!--
body, table {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 9px;
}
.btn {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 9px;
 background-color: #CCCCCC;
 height: 20px;
 border: 0px none;
}
.b_l {
 background-image: url(img/button_left.gif);
 background-repeat: no-repeat;
 background-position: left top;
}
.b_r {
 background-image: url(img/button_right.gif);
 background-repeat: no-repeat;
 background-position: right top;
}
//-->
</style>
<script language="javascript" type="text/javascript">
<!--
 function btnChange(n) {
  var sItem = n;
  if(sItem.class=='btn') {
   sItem.class = 'btn b_l b_r';
  } else {
   sItem.class = 'btn';
  }
 }
 
//-->
</script>
</head>
<body>
<table width="200" border="0" cellspacing="0" cellpadding="0">
 <form name="frmMain" method="post" action="script.asp">
  <tr>
	<td width="60">Name</td>
	<td>
	  <input name="name" type="text" id="name" size="20">
 </td>
  </tr>
  <tr>
	<td>&nbsp;</td>
	<td><input name="Submit" type="submit" class="btn" value="Submit" id="btnSubmit" onmouseover="btnChange(this);" onMouseOut="btnChange(this);"></td>
  </tr>
	</form>
</table>
</body>
</html>