Recipe 9.6. Making Buttons Respond to Mouse Rollovers

Problem

You want your button to respond to mouse rollovers.

Solution

Define an onRollOver( ) and/or onRollOut( ) event handler method for the button instance.

Discussion

You can configure your buttons to respond to mouse rollovers and rollouts using the onRollOver( ) and onRollOut( ) methods, respectively. If you define an onRollOver( ) method, it will get invoked any time the user moves the pointer over the button instance. Likewise, the onRollOut( ) method, if defined, gets invoked whenever the user moves the point off of the button instance.

The following are examples of the correct syntax for defining these event handler methods for a button instance:

	btInstance.onRollOver = function() {
	  // Actions to occur when the user moves the mouse over the button go here.
	};

	btInstance.onRollOut = function() {
	  // Actions to occur when the user moves the mouse off the button go here.
	};

If you are not yet familiar with the process for adding actions to buttons by way of event handler methods, see Recipe 9.5 for detailed instructions.