A rollover button is a button that changes its appearance when you place the mouse over it, or when you click on it. Generally the rollover buttons change their text color or size when you place the mouse over them but you can make a rollover button to change not only its text appearance but its background graphics too. In our example we will set the rollover buttons to change their text color. In HTML the rollovers are 2 or more images depending on how many instances you define (you can define 3 different instance: over, selected, out) that replace each other depending on the action you set. So the default image is that for the "up" state of the button. When you define a rollover for that button when you'll place your mouse pointer over that button the HTML code replaces the original/default image with the one defined as "over" state image and your internet browser will display the "over" state image.

Let's create rollover states for our 4 buttons.

Open the file index.psd from template/psd in ImageReady

Select Slice Select Tool from Tools

Now click on the Home button slice. The slice will change its border in yellow.

Now take a look at the Web Content palette. You'll notice that the home slice has a rollover status defined (and also the other 3 buttons)

That's because we have already created rollovers for the 4 buttons. Now you'll have to delete them and learn to redo them. First of all let's delete the rollover states. To do that you only have to right-click over the defined "Over" state and choose Delete Rollover State:

Now go on and delete the other 3 defined "Over" states for the rest of the 3 buttons. After that you'll be ready to proceed and create the rollover state for all the buttons

So let's start! With the Slice Select Tool selected (see above) go on and click on the home slice (the slice that defines the Home button). As you may notice the slice will also be selected in Web Content palette (if you don't have the Web Content palette visible go to main menu and choose Window -> Web Content).

Now with the "home" slice selected Right-click on the blue area in Web Content palette and from the menu choose Add Rollover State:

You'll notice that below the "home" slice in Web Content palette will appear a new instance for the "over" state of the button:

Now every change you make to the layout will be recorded as rollover state and displayed when you place your mouse over the button.

In our layout we have created 2 text layers for each button: one for the default up state and one for the over state. The text layer for the over state of all buttons are hidden because we want that text (the orange text) to appear only in a rollover state. So now that we defined a rollover state for the "home" button we will hide the default state text layer and unhide the over state text layer for this specific button only.

Go to the Layers palette and select the "home" text layer:

Now hide this layer and reveal the layer just above it (the "home over" layer)

You will notice that in the Web Content palette the Over state display an orange text. Now go and click on the "Services" slice in the Web Content palette. This slice is just above the "Home" slice:

As you can see by selecting a different slice you end the process of defining an over state for the "Home" slice. Also you may notice that in the Layers palette the "home" layer is revealed again and the "home over" layer is hidden again. This happened because the rollover states are hidden states. They appear only if a specific action occurs (in our example you place the mouse pointer over the button)

Now go and create rollover for the rest of the buttons. If you don't find the slices in the Web Content palette you can click on them directly in the layout having the Slice Select Tool selected. Repeat the process and for every specific slice hide and reveal the specific layers (for "services" slice go and reveal the "services over" layer and hide the "services" layer and so on). Don't forget to end the rollover definition process click on a different slice not on the default state slice!

Your Web Content palette should look like this: