Controlling a form with an image?

[Ellie]

I currently have a login form, ripped from my forums. I'm trying to do something with it for my website, but I've come to a snag.

The form looks like this:

                <form action="http://forums.vengeance-rpg.com/index.php?action=login2" method="post" >
		        <p>
		   Username: 
		   <input type="text" name="user" size="15" />
		        </p>
		        <p>
		     Password:
		     <input type="password" name="passwrd" size="15" />
		     <br>
		     <br>
             <select name="cookielength">
			        <option value="60">1 Hour</option>
			        <option value="1440">1 Day</option>
			        <option value="10080">1 Week</option>
        
			<option value="302400">1 Month</option>
			        <option value="-1" selected="selected">Forever</option>
		            </select>
              <input type="submit" value="Login" />
              </p>
                </form>

Now, it has two entry boxes (username and password), a drop-down menu for how long to login for, and a button called "login".

I want to replace the login button with my own -image-. It's a rollover image:

<a border="0" href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image9','','button_login_on.png',1)"><img src="button_login.png" name="Image9" width="100" height="25" border="0"></a>

Generated in Dreamweaver (which is what I'm using for this).

I'm not sure where to go next, to replace the login button with this image though.

I presume this is possible as I've seen other places do similar things :/

 

[djzalzer]

Use CSS.  For instance:

<form
 action="http://forums.vengeance-rpg.com/index.php?action=login2"
 method="post">
  <p>Username: <input name="user" size="15"
 type="text">
  </p>
  <p>
Password:
  <input name="passwrd" size="15" type="password"><br>
  <br>
  <select name="cookielength">
  <option value="60">1 Hour</option>
  <option value="1440">1 Day</option>
  <option value="10080">1 Week</option>
  <option value="302400">1 Month</option>
  <option value="-1" selected="selected">Forever</option>
  </select>
  <input value=" " class="submitbutton"
 type="submit">
  </p>
</form>

and the CSS

.submitbutton {
border-style: none;
width: 125px;
height: 60px;
background-color: #e4ff99;
}
.submitbutton:hover {
background-color: #fdfdfd;
}

replacing the background colors with the image, and the hover-image.

 

[Ellie]

Thanks, that works fine