Rollover Image as a Reset Button

The script in the previous page allows you to easily create a "reset image" button. As long as we're creating a reset image, it's only a small step to make into a rollover reset image. Here's how.

Suppose these are the two images we want to use for our rollover: and . We create the reset image the same way as in the previous example adding only two lines of code to make it a rollover:

<FORM ACTION="../cgi-bin/mycgi.pl">
<INPUT NAME="query">

<SCRIPT TYPE="text/javascript">
<!--
var sr = new submitroll("go2.gif","go2.over.gif","mysubmit");
sr.write();
//-->
</SCRIPT>

<SCRIPT TYPE="text/javascript">
<!--
var ri = new resetimage("reset.gif");
ri.name = "resetter";
ri.rollover = "reset.over.gif";
ri.write();
//-->
</SCRIPT>
<NOSCRIPT>
<INPUT TYPE=RESET>
</NOSCRIPT>

</FORM>

Which gives us this form:

(You may notice that we also that we set the submit button as a rollover using the Rollover Submit Image technique.)

We set the "mouseout" image as the regular image for the reset. To add the rollover, we first give it the image a name. In our example we name the image "resetter" with the command ri.name = "resetter";. You must give the image a name or script will fail to generate the necesary code.

We then indicate the source of the "mouseover" image with the command ri.rollover = "reset.over.gif";.