This is a CSS issue, once you get the form action sorted out.
To do a rollover image on a form button you must define two classes in your style sheet. And in the style definition for each class you put the image Height, Width, and source (url). [NOTE: make sure both images are the same size for best results.]
Then, in your form on the submit button, no need to use image tags, you specify the class in the 'starting' position. Then, you specify the class onMouseOver and again for onMouseOut. Like this: [NOTE: make sure you specify value=' ' for your button or you will get text over the image.]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Login</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.on {
background: transparent url(http://www.spoonohost.com/logos/sh88x31-4.gif) no-repeat;
width:88px;
height:31px;
border:0;
}
.off {
background: transparent url(http://www.spoonohost.com/logos/sh88x31-5.gif) no-repeat;
width:88px;
height:31px;
border:0;
}
</style>
</head>
<body>
<form action="" method="POST">
<h2>Login</h2>
<input name="username" type="text" size="30" /> User name
<br />
<input name="password" type="text" size="30" /> Password
<br />
<input name="submit" type="submit" value="" class="off" onMouseOver="this.className='on'" onMouseOut="this.className='off'" />
</form>
</div>
</body>
</html>
You can copy and paste this code into your page to give it a try.
PS, I didn't know what two buttons to use for this example so I found two images on my host's site. SpoonoHost is great! So I don't mind giving them a plug in our community.
