How to incorporate a CSS rollover into a form button?

[celebritymusic]

Hi

I want to change the standard 'SUBMIT' form button into a CSS rollover graphic.

I have used the CSS rollover button in other parts of the site, and it works fine:

<div class="rightrollover">
<a href="http://www.mysite.com.au/cart.php?page=faq">FAQ</a>
<a href="http://www.mysite.com.au/cart.php?page=faq#postage">Shipping </a>
<a href="http://www.mysite.com.au/cart.php?page=faq#exchange">Refunds</a>
<a href="cart.php?target=help&mode=contactus">Contact </a>
</div>

--------------------------
CSS:
---------------------------

.rightrollover a {
display:block;
width: 82px;
font: bold 13px sans-serif;
margin-top: 10px;
margin-left: 52px;
text-align:center;
color:#333;
background:url(http://www.mysite.com.au/rightbutton.gif) 0 0 no-repeat;
border:0;
text-decoration: none;
padding: 5px 20px 11px 3px;
}
.rightrollover a:hover {
color: #69DB33;
}
.rightrollover a:active {
background-position: 0 -34px;
color:#FDD99E;
padding: 8px 23px 8px 0px;
}
---------------------------------------------------------------

What I am unsure of is how to incorporate it into the form (currently has a static image as the button):

<input type="image" name="Submit" value="Submit" src="http://www.mysite.com.au/buttongraphic.jpg" border="0" />

Can it be done?

Cheers

Shaun

[Whir]

Not sure if it will work or not, but try changing the url in rollover a to the static image, and adding the background:url(.gif) to rollover a:hover. You shouldn't need a:active, is that even supported in the latest XHTML?

Then just do a class="rollover" in the <input> tag and take out the src=.

That also may not work at all, since you're not using an <a> tag.

You can try just having rollover and rollover:hover as well.

[RicheemxX]

will this work for ya
<input type="image" name="Submit" value="Submit" src="images/buttonimage.gif" onmouseover="this.src='/images/hoverimage.gif'" onmouseout="this.src='/images/buttonimage.gif'">

or something like that anyways... it has been a long day

[Whir]

Ah! Javascript is cheating!





Can't believe I forgot that. ~_~

[RicheemxX]

well yeah it is but ya know