HTML 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">
<!--
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: 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: (Form is not live)

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.

Rollover Image as a Reset Button >