Make Graphic Rollover Buttons

10/28/2009 11:41 AM
You can subscribe to this wiki article using an RSS feed reader.

 Return to WS 5.0 Home Page

Use the Graphic Rollovers Command to make Graphic Rollover Buttons

A Graphic Rollover Button is made of three different graphics that look and act like buttons. To create one of these buttons, you must add three graphics or text objects to your page. Even if you want to use the same graphic twice, you will need three objects. The objects should be the same size or proportions because Web Studio will resize all of the graphics to the size of the one selected for the normal state.  

Place and Resize three graphics

  • Place three graphic or text objects on the page.
  • Select the object you want to use for the Normal state and then use the handles to make it the size you want for your button.
  • Resize the other two graphics so that they have the same proportions.
  • With the first object selected, hold down the Shift key and then click on the other two objects in the Mouse Over and Mouse Down order. Now all three objects are selected and can be made to be equal size.
  • Click on Page Layout Tab>Resize Group>Make Equal Size. This makes all of the objects the same size as the first object.

 

Create the Rollover

  • The objects are still selected. If they are not, then hold down the Shift key and select the objects in the Normal, Mouse Over or Mouse Down order.
  • Click Create Tab>Buttons Group>Graphic Rollover. This opens the Graphic Rollover Button Studio.

  • This dialog allows you to change the graphic as well as the text, font and font color. You can use any combination of graphics. It is not necessary to use text on graphic rollovers especially if the graphic defines the purpose and state.  

Button Text: This places text on all three states. If you want the text to be different on the buttons, create a text box and merge it with the graphic before you make the Rollover button. 

Font Options: Click on Font and Color to select the font, font style and font color for the buttons. 

Load Graphics: You can change any one of the graphics by clicking the Load New Graphic button. This brings up the Open dialog. Choose the graphic then click Open to replace the graphic.  

  • Click OK when done. 
  • A button is placed on the page. Even though the button has three states, only the normal state is seen. To see the button in action with all three states, you need to Preview the button.

 

See also

Make Normal Buttons

Make Rollover Buttons

Types of Buttons