javaScript问题(老师都找不出来问题所在,求高手)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>     //描述:让4张图片在按钮上切换,图片路径都正确，按钮只触发onMouseDown事件，不知道什么原因
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <style type="text/css">
      .t1{
     background:url("image/dj.png");
  }
  .t2{
         background:url("image/tq.png");
  }
  .t3{
     background:url("image/xt.png");
  }
  .t4{
     background:url("image/zc.png");
  }
  </style>
  <SCRIPT LANGUAGE="JavaScript">
  <!--
function rec(){
   document.getElementById('b1').className="t3";
   document.getElementById('b1').onmouseOver=function () {this.className="t2"}
   document.getElementById('b1').onmouseDown=function () {this.className="t3"}
   document.getElementById('b1').onmouseUp=function () {this.className="t4"}
   document.getElementById('b1').onmouseOut=function () {this.className="t1"}
    }
  //-->
  </SCRIPT>
 </HEAD> <BODY>
<FORM METHOD=POST ACTION="">
   <INPUT TYPE="button" id="b1" VALUE="确定">
</FORM>
  
 </BODY>
 <SCRIPT LANGUAGE="JavaScript">
 <!--
rec();
 //-->
 </SCRIPT>
</HTML>