Today is . Page created 08/14/06

Mouse On Mouseover Form Button Buttons

When a user moves the mouse over the button, it will change text. When the mouse is moved away, the text will change back. Perfect for adding short instructions on a submit button.

We have tested the code in IE6.0, Firefox1.5.0.6, Opera9.01, Netscape8.1 and AOL Explorer1.2. This button worked well in all platforms with no variations observed.

For Your Information For your Information:     Before we begin, we feel obligated to advise you that the above form button is for all intensive purposes a "Stand Alone" script. In other words, it really does not do much of anything other than what you see. In order to make it function as designed, you need to incorporate it into a valid working form. If you do not have a good Solid Knowledge of HTML coding, javascripts, forms and reconfigurations, please "Do Not Attempt" this until you are Proficient in the aforementioned areas.

<!---- Button Reconfigurations ---->

<input type="submit" value="Click here" onmouseover="this.value='== Just click once! =='" onmouseout="this.value='Click here!'">

Define Above Areas Of Reconfiguration

  • value="Click here" ~ This is the initial word(s) that will appear on the button.
  • this.value='== Just click once! =='
  • " onmouseout="this.value='Click here!'" This is the text that will appear after you remove the cursor from the button.

On A Final Note     If you notice in the above code the use of the quotation marks (") and the apostrophe ('). "Do Not" by mistake delete either of the characters or the button will not function as designed. The ones to be mostly concerned with are the ones which are right next to the apostrophes. These can be deleted very easily by accident.

this.value='== Just click once! =='"
onmouseout="this.value='Click here!'">

We hope our tutorial was easy to follow and we covered everything in detail. If you would like to add this effect into your pages, grab the respective below link and you are there. If you have any problems with this or anything else, feel free to consult our [ FAQ ] and if you can't find the answer there, [ contact us ].
[ Get Code Here ]   [ Rate This Page ]