WDN Logo

home-icon Home / JavaScript / Using an image as a submit button

Using an image as a submit button

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.

Sponsored Links

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.

Sponsored Links

Search

Your comments
Star icon IMPORTANT Have a question / problem? Click here to ask an expert.

Caps Lock jokes and funny images

Sponsored Links

Tips

How do I view a deleted web page?
Is there a way to view a deleted web page - one that is no longer available? Yes there is and the solution is quite simple. [more...]

Fact

The movie, Wargames (1983), is often cited by hackers as inspiration for them to indulge in computers and networking. [more...]

Share on Whats app Share on Facebook Share on Twitter Share on Google plus