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";.
Copyright 1997-2002 Idocs, Inc. Written by Miko Sullivan.
| 
Current Users : 19 (Member 0)
Write for us and get publicity, link to your website, and best of all get
paid. Please visit our 
