4D 6.5 now makes "Roll Over" buttons simple. A roll over button is a common picture button set to display a different picture based on a particular action applied to the button. This tech tip will show you how to build a simple roll over button for your application.

Creating a roll over button is a three stage process.

• Set up the image in the Picture Library
  
• Place a picture button on the form
  
• Assign the image to the picture button
  

Note: Images stored in variables or resources can also be used to create roll over buttons.

Set up the image in the Picture Library

First, you must create a single image that contains both the display image and the roll over image. Both parts of the single image should have the same dimensions. Below is a sample image for a roll over button. The left half will be the constant image and the right half will be the roll over image.

After inserting the image into the Picture Library, use the Frames option in the Picture Properties dialog. Enter 2 in the columns section and 1 in the rows section. This tells 4D that the image is on a single row and that it should be split down the middle of the image. Use the frames previewing tools to animate the image in the Picture Library. If the roll over is not lining up correctly, alter the dimensions of the image in the Picture Properties dialog.

Place a picture button on the form

Once the image is correct in the picture library, the next step is to create a picture button in the form. Place the picture button on the form where you would like it displayed.

Assign the image to the picture button

This can be done in either the Object Properties Dialog or the new Properties List. For this Tech Tip we'll use the Properties List. Make sure the Properties List is displayed, and select the picture button you just placed on the form. Under the Display and Printing Theme of the Properties List, select the source as "Picture Library". For "Name/ID" assign the reference number of the image contained in the picture library. Now select the behaviors you'd like the button to have. Select "Switch when roll over" for a simple roll over button.

Here is a list of the behaviors you can define for a picture button:

1. Not Transparent
2. Switch continuously on click
3. Loop back to the first frame
4. Switch when roll over
5. Switch back when released
6. Transparent
7. Use last frame as disabled