Working with Image Fields | Web Design Garage

An image field is a graphical replacement for a standard HTML submit button. The image field is clickable, and it works exactly like a submit button in that clicking it sends the form data to the Web server. The advantage to replacing a submit button with an image field is that you get to use whatever image file you like to submit the form, as in Figure 68.5. You don't have to accept the standard and generally ugly button widget that comes with your browser.

Listing 68.5. View Source for Figure 68.5.

 <form>   <input type="image" name="goButton" src="/books/2/30/1/html/2/images/go.gif" width="20" height="20"> </form>

Figure 68.5. Use an image field in place of a standard submit button.

The src attribute contains the path to the image field's graphic file, and the width and height attributes supply the width and height of the image, just as in the img tag.

Replacing a Reset Button

Image fields always submit form data. There's no way to change an image field so that it functions as a reset button, for example. But don't let that stop you. Just use a regular image tag. Drop anchor tags around the image to make it clickable, and then add a simple JavaScript function to duplicate the reset behavior. Here's the complete script, plus a sample link:

[View full width]
 <head>   <script language="JavaScript">     function doReset() {       document.formname.reset(); /* Replace formname with the value of the form tag's name attribute. */     }   </script> </head> <!-- The body of the page follows. --> <body>   <a href="javascript:doReset();"><img src="/books/2/30/1/html/2/images/reset.gif" width="60" height="40"  alt="Click to reset the form."></a> </body>

Replacing a Generic Button

Along the same lines, you can use an image to launch a JavaScript function and replace the generic button widget. Try something like this:

[View full width]
 <head>   <script language="JavaScript">     function yourFunction() { /* Put your JavaScript function here. */     }   </script> </head> <body>   <a href="javascript:yourFunction();"><img src="/books/2/30/1/html/2/images/button.gif" width="60" height="40"  alt="Click to launch the script."></a> </body>