Click Here for FREE Web Hosting!

Home >> Forms >> Image as a Reset Button

Image as a Reset Button

Reset Image: Settings

Rollover Image as a Reset Button

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:

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";.

Image as a Reset Button

Reset Image: Settings