The next page element we'll add is a set of four rollover buttons. A rollover button actually consists of three buttons, each with it's own properties called states. These states are:
Normal: how the button looks when not clicked on.
Mouseover: how the button looks when you put your cursor over it
Mousedown: how the button looks when you click on it.

A sort of programming language called javascript tells the web browser how to present these states. Javascript is complicated to write and takes a good amount of knowledge to do. Luckily, PhotoImpact takes all the tough stuff and does it for you.

The type of rollover buttons we'll create are the basic kind you see all over the web. These are the buttons that light up when you put your cursor over them and press down when you click on it. We could use the built in rollover buttons in the Component Designer, but I thought it would be fun (and a good workout for you) to create them from scratch.

The tools used in this tutorial include: the pick, text, and path tool (shape), material gallery and properties, as well as the Align and Group commands found in the Object menu. You should be somewhat familiar with these tools and commands and if you aren't, you will be by the time we're through. Let's get started.

1. Open the mysite.ufo you saved earlier.
2. Using the Shape tool, draw a rectangle: width=90, heighth= 20h
color = (hex # 0000C4)
3. Duplicate the rectangle (shift + D) and drag it off the original.
4. Select one of the rectangles and open the Easy Pallet. Go to the Gel category in the Material Gallery.
5. Right click on the G15 preset and choose Modify Properties and Apply.
6. Select the Light tab and reduce the number of lights to 2. Light # 1 should be set to Direct and # 2 should be set to spot. Set the Ambient to 81.
7. Click on the light shape icon and choose rectangle from the drop down box.
8. Select light # 1 , click in the middle of the preview window (your cursor should turn into cross hairs) and drag the light to the top of the rectangle (see example).
9. Select the Shading tab and use the following settings: Phong, shininess = 11, strength = 8. Leave everything else as is for this tab.
10. Click on light # 2 icon.
11. Still in the Shading tab, use the following settings: Phong, shininess = 0, strength = 2
12 Select the Shadow tab and uncheck the shadow box.
13. Your preview window should look like the one below.
14. Click OK.

1. Select the other rectangle and go back to the Gel category. Right click on G35 and choose Modify...
2. Reduce the lights to 2 and set the Ambient to 36.
3. Go to the Shading tab, select the # 1 light icon and use the following: Phong, shininess = 11, strength = 15
4. Click on the # 2 light icon and set the following: Phong, shininess = 0, strength = 11
5. Select the Shadow tab and uncheck the shadow box.
6. Your preview window should look like the one below.
7. Click OK.

NEXT>

---