Dreamweaver has always made using roll over buttons in your web pages easy and recent releases even have a library of Flash buttons that you can use on your site. However, I bet you did not know, that with the addition of a little snippet of JavaScript, these roll overs and Flash buttons can be used to brighten up your forms.

Roll Overs

For our roll over example we will use the 2 images below for the button. If you want to use them you can simply right click on them and save them to your computer.

     
        up.gif                     over.gif

1/ First we need a simple form. Create a new page and build a form like the one below.
You will notice that we are sending the form (Action) to a page called "submit.asp". We will build that page a bit later. All it will do is display whatever has been entered into the text fields. You can, of course, send the form contents to wherever you like.

2/ Name the first text field "input1" and the second text field "input 2".

3/ Now place your cursor below the text fields and click. Then go click on the "Rollover Image" icon in the Common toolbar.

4/ Browse your way to the first button that you saved, "up.gif", for the "Original Image. Then to the second button that you saved, "over.gif" for the "Rollover Image".

Now enter this into the "When Clicked, Go to URL" field

javascript:document.myForm.submit();

Notice the reference to myForm. That is the name that we gave our form when we built it and you must enter that name into the JavaScript so that it knows which form you are talking about.

5/ Your form will now look like this.

Result Form.

6/ You have not made the "submit.asp" page yet so you will probably get an error if you click on your form button right now. However, this is how it will work once the "submit.asp" page is built.