Mouse Rollovers in Alpha Five

by Dr. Peter Wayne

Here I'll show you how to achieve a mouse rollover effect in Alpha Five.

If you're reading this article on the Internet, you're very familiar with the concept of a mouse rollover. A mouse rollover occurs when an image changes as your mouse passes over it. To illustrate, pass your mouse over this button:

Fig. 1. A button with a mouse rollover.

Design a form

We'll begin with a very simple form. Just plop a button into the middle of a blank form. In the button's Properties, set the label to Change text and the foreground color to Cyan: Rollover3

Figure 2. Place the button on the form.

The User object

It shouldn't be all that hard to code a rollover. All we have to do is find the OnMouse event for the button, and write some appropriate code. Ho hum...OOPS! There ain't no OnMouse event for buttons!

Here's where you should kiss Alpha Software for putting the Xbasic reference guide on your \hard disk in Adobe Acrobat® .pdf format. If you do a Ctrl-F to Find "OnMouse" in the Xbasic reference guide, you'll discover that the only object that supports an OnMouse event is the User object.

Now, if you're like me, the User object is something you have tried to avoid, particularly if you read, skimmed, or otherwise ran away fromt the sample code for the clock in the Xbasic reference. Just reading the explanatory comments in the Clock code is enough to bring on an attack of hives! However, even for those of us who are not C++ masochists, we can still get something out of the User object.

Center a User object around the button you drew earlier. You can simply drag the User object from the toolbox just like you drag a button, a frame, or any other design control. The icon for the User object is the little blue gear:

Fig. 3. Surround the button with a User object

It's important to make the User object extend at least 0.2 inches beyond each edge of the button. The reason for this will become clear later. I adjusted my button's dimensions to 1.1 inches wide by 0.4 inches in height, and placed it 0.4 inches from the top and 0.8 inches from the left edge of the form:

Fig. 4. Button object's dimensions

Alpha Five named my user object User1. I next adjusted the User1 object so that its dimensions were overlapping by 0.2 inches on each edge:

Fig. 5. Dimensions of the User1 object

Still working in the Properties of User1, I clicked off Transparent control. If you don't make the User1 object transparent, it will conceal the button that is beneath it when you view the form:

Fig. 6. Make the User1 object transparent

The OnMouse event

Now that we have our button and our user object strategically placed, we can code the proper event script for the rollover. The OnMouse event contains a number of sub-events:

a_user.mouse.event, which can take the values of "left double click", "left down", "left up", "right double click", "right down", "right up", and "move"
a_user.mouse.x, which holds the x-coordinate of the mouse within the bounds of the user object. The x-coordinate is measured in twips, a printers' measure which is 1/120 of an inch.
a_user.mouse.y, which holds the y-coordinate of the mouse within the bounds of the user object. The y-coordinate is also measured in twips.
a_user.mouse.keys, which are triggered if the control or shift key is held down when the mouse is depressed, as in a multiple-select operation.

There is no specific event that will tell us when the mouse enters and leaves the user object, but we can use the move sub-event, along with the x- and y-coordinates, to tell us

when the mouse is in the middle of our user object, i.e., is over the button,
and when the mouse is near the edges of the user object, i.e., has left the button.

We'll change the text and foreground colors of the button whenever the mouse cursor is on top of the button, and change it back when we leave the button. Remember how we arranged the User1 object so that it extends 0.2 in. on each side of the button? 0.2 inches equals 24 twips (0.2 in. * 120 twips/in.) Our first approach to the script to change the button properties in response to mouse position is:

if a_user.mouse.event="move" then
 select 
  case a_user.mouse.x>24 .and. a_user.mouse.x<156 .and. \
       a_user.mouse.y>24 .and. a_user.mouse.y<72
    button1.text="you're on top of me"
    button1.fill.forecolor="magenta"
    button1.refresh()
  case else
    button1.text="Change text"
    button1.fill.forecolor="cyan"
    button1.refresh()
 end select
end if

Script 1. First approach to mouse rollover

If you run enter this script and run it, you'll notice that the mouse cursor flickers annoyingly and unpredictably when the mouse is over the User1 object. As best as I can tell, that's a consequence of the button1.refresh() command, which seems to trigger the a_user.mouse.event even when the mouse is not being moved. We can eliminate the flicker by only issuing a refresh() when we actual have to change the button text and color. Here is an improved script:

if a_user.mouse.event="move" then
 select 
  case a_user.mouse.x>24 .and. a_user.mouse.x<156 .and. \
       a_user.mouse.y>24 .and. a_user.mouse.y<72
   if button1.text<>"you're on top of me" then 
    button1.text="you're on top of me"
    button1.fill.forecolor="magenta"
    button1.refresh()
   end if
  case else
   if button1.text<>"Change text" then 
    button1.text="Change text"
    button1.fill.forecolor="cyan"
    button1.refresh()
   end if
 end select
end if

Script 2. Mouse rollover script with a check to see if a change needs to be made

Something's missing...

We're almost done. The only thing that's missing is that the button is now hidden by the User1 object, and we can't land the mouse on the the button any more! Fortunately we can get around this, because we can check for a left down subevent in the mouse action. If we detect a mouse press in the User1 object in the area overlying the button, we'll issue a push() command to the button. Here's our next revision:

select
 case a_user.mouse.event="move"
 select
  case a_user.mouse.x>24 .and. a_user.mouse.x<156 .and. \
       a_user.mouse.y>24 .and. a_user.mouse.y<72
   if button1.text<>"you're on top of me" then 
    button1.text="you're on top of me"
    button1.fill.forecolor="magenta"
    button1.refresh()
   end if
  case else
   if button1.text<>"Change text" then 
    button1.text="Change text"
    button1.fill.forecolor="cyan"
    button1.refresh()
   end if
 end select  
 case a_user.mouse.event="left down" .and. a_user.mouse.x>24 .and.\
      a_user.mouse.x<156 .and. a_user.mouse.y>24 .and. a_user.mouse.y<72
  button1.push() 
end select

Script 3. Final version of mouse rollover script

A mouse rollover is one way to add a little excitement to a form. It's not going to make or break your application, but it lends a little of that web mystique to your Alpha Five application.

5/9/99

Don't forget, we need your feedback to make this site better!

Return to home