Image as a Reset Button

HTML allows you to use an image as a submit button, but it doesn't provide for images as reset buttons. We can work around that limitation, however, with a little JavaScript. The technique described here allows you to easily create a reset image button. This technique only requires you to write a few lines of code.

First, copy the following JavaScript exactly as-is into your web page. Don't change anything.

<SCRIPT TYPE="text/javascript">
<!--
// copyright 1999-2001 Idocs, Inc. http://www.idocs.com/tags/
// Distribute this script freely, but keep this 
// notice with the code.
var resetRolls = new Object();
function resetimage(src)
{
this.src=src;
this.confirm=true;
this.alt="Reset";
this.write=resetimage_write;
}
function resetimage_write()
{
document.write('<A ');
if (this.rollover)
{
if (! this.name)
{
alert('to create a rollover you must give the image a name');
return;
}
resetRolls[this.name] = new Object();
resetRolls[this.name].over = new Image();
resetRolls[this.name].over.src=this.rollover;
resetRolls[this.name].out = new Image();
resetRolls[this.name].out.src=this.src;
document.write(
' onMouseOver="if (document.images)document.images[\'' + 
this.name + '\'].src=resetRolls[\'' + this.name + '\'].over.src"' + 
' onMouseOut="if (document.images)document.images[\'' + 
this.name + '\'].src=resetRolls[\'' + this.name + '\'].out.src"'
);
}
document.write(' HREF="javascript:');
if (this.confirm)
document.write('if(confirm(\'Are you sure you want to reset?\'))');
document.write(
'document.forms[' + 
(document.forms.length - 1) + '].reset();void(0);">');
document.write('<IMG SRC="' + this.src + '" ALT="' + this.alt + '"');
document.write(' BORDER=0');
if (this.name)document.write(' NAME="' + this.name + '"');
if (this.height)document.write(' HEIGHT=' + this.height);
if (this.width)document.write(' WIDTH=' + this.width);
if (this.otheratts)document.write(' '+ this.otheratts);
document.write('></A>');
}
//-->
</SCRIPT>

Now, suppose we want to use this image as our reset button: We'll create our form with this code:

<FORM ACTION="../cgi-bin/mycgi.pl">
<INPUT NAME="query">
<INPUT TYPE=IMAGE SRC="go2.gif" HEIGHT=22 WIDTH=50 ALT="go!" BORDER=0>
<SCRIPT TYPE="text/javascript">
<!--
var ri = new resetimage("reset.gif");
ri.write();
//-->
</SCRIPT>
<NOSCRIPT><INPUT TYPE=RESET></NOSCRIPT>
</FORM>

Which gives us this form:

In the previous section we showed you how to create a rollover submit image. In the next page we'll show you how to create a rollover reset image. We'll also explain how to set some of the optional settings.