Creating this disjointed rollover effect is not technically difficult but there are a lot of steps so stick with it. Here are the steps:

1. Create four different versions of the image, One that is all black and white and one each that has each kid in color and the rest black and white. Use four frames to hold these images.
2. Create 3 buttons using the button wizard and library.
3. Create a slice around each kid.
4. Tell the buttons to switch to a different frames and slices when a rolled over.

1. Open the image and open the Frames panel. Windows >> Frames. You should see that you have one frame.

2. Duplicate this one frame 3 times. Use the little hidden button in the top right corner of the Frames panel to get to the Duplicate command.

3. You should have just 4 identical frames when you are done.

4. Select Frame one and the edit the image so that it is black and white. Commands >> Creative >> Convert to Grayscale. Be sure you are in frame one when doing this, you now have four copies of the image. Frame one is going to be what shows when someone first sees this image on a web page. To avoid confusion you may want to rename the frame. To do this double click right on the name of the frame and a small text field will open up. Just type the name in and hit enter. Name it something like first. Rename the other three frames also. I named them for the kids. Frame 2 --Jill, Frame 3 -- John, Frame 4 -- Joey.

5. Switch to Frame 2 or Jill's frame. In this frame we want to edit it so that Jill is in color and everything else is black and white.

6. Use the Lasso tool to draw around Jill and thus selecting just her.

7. Use the Shift and Alt keys to fine tune the selection.

8. Go to Select >> Select Inverse to switch the selection from Jill to everything but Jill.

9. Command >> Creative >> Convert to Grayscale to make everything that is selected black and white.

10. Frame 2 or Jill's frame should look like this.

11. Repeat the same process for the "John" the Middle kid and for "Joey" the third kid.

Go to Page Two