Rollover Image as a Reset ButtonThe 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
We then indicate the source of the "mouseover" image with the command
|