Using Button Images and Floating Boxes
Floating boxes are cool enough by themselves, but when they are combined with the "Actions" capability of button images, a surprising number of possibilities open up to web designers. You can produce complex navigation schemes that fit in compact spaces, animate graphical elements of your page, or just plain have a good time with your design.
For an example of what I'm talking about - turn this sign "ON" and "OFF" . Or, you could visit the "Graphics" page on this website and view the light switch that I made in Photoshop 5.5.
To Produce an Effect Like This:
It's really not too hard to produce a cool effect like this. Simply create the images that you will need to produce your effect in a graphics program like Photoshop. The effect above I needed the following 7 images:
"turn_off.jpg" "turn_off_down.jpg" "turn_on.jpg" "turn_on_down.jpg"
"conduit.jpg" I actually created this as one large image in Photoshop 5.5 and then sliced it into separate images for the web page. This ensures that everything is the same size and fits together correctly!
"neat_box.jpg"
"neat_box_on.jpg"
Remember TIPS 2 and 3:
You will need the "Layout Grid" from TIP #2 and the "Floating Box" from TIP # 3 before you can produce these effects - you might want to review or look at these tips again! Drag a layout grid from the palette onto your page. Adjust the size of the grid and location in the "Inspector" window as in TIP #2.
Drag a floating box icon onto the grid and roughly position it where you want it.

Name it in the inspector window and position it either at "Depth 1 or Depth 2". In my example above, the following images were in floating boxes at depth 1.
In my example above, the following images were in floating boxes at depth 2 (above those at depth 1).
Now switch tabs on the "Palette" to the "Button Image" icon.
Each floating box should now get one of these icons placed in it, and use the "Inspector" window to put one of your images in each one of the icons. As an example, I named one of the floating boxes "turnon", and in the box I placed a button image with the "turn_on.jpg" file in it, and positioned it at depth one and left it "Visible". Exactly above this floating box, I placed another floating box called "turnondown", put the button image "turn_on_down.jpg" file in there, positioned it at depth two, and removed the check from the visible box to make it invisible. Sounds simple huh? Keep trying, at some point the sentence above will make sense to you - at this point, you should seek medical attention! Here is what you basically wind up with after all is said and done. (I've moved the top images over a little bit so you can see - actually they are positioned directly on top of the lower images)
Throw a little logic on this thing now:
When I click on "turn_on.jpg" This "invisible layer" should popup!
To do this, we turn to the "Actions" tab on the button image inspector. Click on your button image to select it, choose the "Actions" tab and follow these steps.
  1. Choose the "trigger" for the event - I chose "Mouse Click"
  2. Click the "+" button to add an action
  3. Click the " ? Action" button and select "Multimedia" .."ShowHide"
  4. Choose the "Floating Box" that the action applies to
  5. Finally, choose "Show" as the desired mode.
You can add more actions to the same button by repeating the steps above and choosing different layers or different actions. For example, at the same time that I want the "Neat Effect" box to show I also want the "on_down" button layer to show as well to indicate that I have turned the sign on. All I do is go back through these steps on the same button image and choose the appropriate layer. Keep working that logic, and soon you'll have layers showing, hiding, moving, etc.