Categories:
Partners

Using an image instead of a form button as the "go" button

I don't know who defined the appearance of form buttons as HTML was created, but most would agree that they are quite ugly. Luckily, JavaScript was invented shortly after. In this section, we'll illustrate how to replace the usual (<input type="button") button associated with a combo box with a more eye-catching image.

By default, most combo boxes have the below form button attached to the end of it, which goes to the selected URL upon clicking it:

<input type="button" name="test" value="Go!" onClick="go()">
</form>

The "meat" of the above button is the code onClick="go()", which tells JavaScript to execute a function ("go()" in this case) if the button is clicked on. With that in mind...

To use an image instead, simply define a hyperlinked image that does the same thing- executes a function when clicked on. There are several methods that will help us achieve that, the simplest being a JavaScript URL:

<a href="JavaScript:go()"><img src="combo.gif"></a>

The part in red is a JavaScript URL, and whatever we put after the semicolon (:), JavaScript executes it as the link is clicked on. Since we want it to execute function go(), "go()" is put inside it.

Below is  a combo box that uses an image as the "warper"

Copyright 1997-2014 JavaScript Kit. NO PART may be reproduced without author's permission.