IMG Class

Hello

I am trying to figure this out where when the cursor is hovered over the area it will change to another image that I have in my images root.

.submit a, .submit a:hover, .btn input {
display: block;
font-size: 16px;
color: #fff;
padding-top: 22px;
text-align: center;
text-decoration: none;
background: url(images/bg_button.png) no-repeat 0 0;
height: 37px;
border: 0;
}

.submit a:hover, .btn input:hover {
background: url(images/bg_button_over.png) no-repeat 0 0;
}

Is my CSS

HTML Code:

Could someone be so kind to help me with this problem. Little confused.

Thank you in advance.

Diana Magers