How to create a rollover button with icon images
This lesson shows you how to skin a button with an image
If you don't already have a button in mind, drag a new button from the tools palette onto your stack.
Go the the file menu and select 'Import As Control' and then 'Image'. This will bring up a dialog allowing you to browse to your files.
The image selection dialog will let you import more than one image at a time. In this case I have selected my button image and its rollover image. Note the images will import on top of each other, so drag them around to arrange them where you can see them.
1) Double click on the button to bring up the Property Inspector
2) Select 'Icons' from the Inspector
You can see that this pane lets you specify a range of images for a button. We are only interested in the 'icon' which is the main image, and the 'hovericon' which will be displayed when a mouse hovers over the button.
1) The buttons on the left load an image chooser dialog which can be used to select the images we have just imported.
Click on the button next to "icon", then in the 'Image Library' selection choose 'This Stack'
Set one of the images for your 'icon' state and the other for your 'Hover Icon' state.
1) Resize your button to fit the image
2) Set the style to 'transparent'
3) Set the 'showName' property to false
4) Set the 'autoHilite' property to false
5) Set the 'sharedHilite' property to false
6) Set 3-D to false
7) Set Show Border to false