 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"
|
