Idocs Guide to 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">
<!--
// 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: 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. Copyright 1997-2002 Idocs Inc. Content in this guide is offered freely to the public under the terms of the Open Content License and the Open Publication License. Contents may be redistributed or republished freely under these terms so long as credit to the original creator and contributors is maintained.