Change an image when fields are validated

Change an image when fields are validated

I'm quite the novice here and hope someone might be able to help me. I have a form with a username field and password field, and a login button in the form of an image. I would like to have the login button image change its state to the hover style in the CSS when both username and password fields have been validated/filled out. Thanks!


/** Button CSS **/
input.button{
background:url(images/loginbtn.png) 0px 0px;
width:92px;
height:31px;
border:0px;
float:right;
margin-right:20px;
margin-top:5px;
}
input.button:hover{
background:url(images/loginbtn.png) 0px -31px;
}
input.button:active{
background:url(images/loginbtn.png) 0px -62px;
}

  </style> 
/** end CSS **/
                        <div class="login">
                                <span class="usertext">User ID:</span><br>
                                <input class="textbox" type="text" id="user" ><br>
                                <span class="usertext">Password:</span><br>
                                <input class="textbox" type="password" id="pass"
                                onkeydown="if (event.keyCode == 13) document.getElementById('login').click()"/>
                              <br />
                        </div>
                        <div class="bottom">
                                <input id="login" type="button" name="btnLogin" onclick="OKClick()" class="button">

                        </div>