Idocs Guide to HTML

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: reset button and reset rollover. 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";.

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.