Using an image as a submit button

A submit button created using <input type="submit> is rather a drab looking gray colored entity, unless you know style sheets. For all you designers who have detested this dull button, here is a solution to add color to your HTML forms.

The simplest way is to use an image as a submit button employing the <input> HTML form tag.

<input type="image" src="butup.gif" alt="Submit button">

When using this tag, you should remember some important differences between Netscape and Internet Explorer and how they handle this tag.

• Netscape ignores the alt attribute.
• Netscape gives no indication that this image can be used to submit a form. In Internet Explorer, the mouse cursor changes to a hand.
• Netscape ignores any JavaScript event handlers attached to this tag. Thus, client-side form validation is not possible using this tag in Netscape.

To overcome such browser incompatibility, I generally use a linked image and a little JavaScript code. The image when clicked submits the form through onclick() JavaScript event handler. Let me share this piece of code with you.

<a href="javascript:document.myform.submit()" 
onmouseover="document.myform.sub_but.src='butdown.gif'" 
onmouseout="document.myform.sub_but.src='butup.gif'" 
onclick="return val_form_this_page()">

<img src="butup.gif" 
width="143" height="39" border="0" alt="Submit this form" 
name="sub_but" />

</a>

Click on the image below to see how it works.

The JavaScript code is actually quite simple once you break it down.
onclick() makes it possible to attach a function that validates the form and returns either true or false. If the return value is true, javascript:document.myform.submit() is executed, else the form is not submitted.
Furthermore, you notice that I've attached onmouseover and onmouseout event handlers to make your button more interactive.
When you mouse the mouse pointer over the image, the source (src) of image sub_but, which is located in myform form is changed to butdown.gif via onmouseover() and when the mouse pointer is removed from the image, the source is changed to butup.gif via onmouseout.
Move your mouse over the button to see the how it behaves and then click on it.