change submit button for image

[bunglebrown]

I'm more than a little stuck with this but I'm sure someone can help-

I have a form that is posted to a php page on submitting. I want to change the standard submit button to something more customised - like an image that I have created. Here's the code that I have for this. Currently the image is shown on top of an ugly submit button. I want to remove the button below so if anyone can direct me on how to do this I would be real grateful.

<div align="right"><button type="submit"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('next','','nextrollover.gif',1)"><img src="next.gif" width="170" height="40" border="0" id="next"></a></button></div>

 

[Scoochi2]

I want to change the standard submit button to something more customised - like an image that I have created.

I'm unsure... do you want the image to change when something happens (such as the user pressing a button) or do you just want to use a custom image instead of a submit button?

If it's the latter, the following simple piece of HTML can be used instead of <input type='submit'> or as you did, <button type='submit'>

<input type='image' src='images/submit.png' value='Submit' alt='Submit'>

 

[VPmase]

That would work but he also wants the image to be a rollover image.

Just use this:

<script>
function subForm(){
document.FORMNAME.submit();
}
</script>
<div align="right"><a href="javascript:subForm();" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('next','','nextrollover.gif',1)"><img src="http://forums.x10hosting.com/programming-help/next.gif" width="170" height="40" border="0" id="next"></a></div>

Of course you're going to have to change FORMNAME to match the name="" attribute in the <form> tag.

 

[Scoochi2]

Only problem with that method is that non-JS browsers will not be able to submit the form.

 

[bunglebrown]

exactly what I'm talking about scoochie!! thanks - you really pulled it out there. Incidentally I incorporated the rollover like this - a big thanks for the concern from all.

<input type='image' src='next.gif' width="160" height="36" value='Submit' border="0" id="nextstep" alt='Submit' onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('next','','nextrollover.gif',1)"

>