| First off, you have to create the images that you are going to use in your floating boxes later. For the effect that I wanted I had to create 7 different images in Photoshop. |
 The "off" button. |
 The "off" button in down state. |
I actually created this all at once and then sliced it up carefully in Photoshop using layers and guides! |
|
|
 The "on" button. |
 The "on" button in down state. |
|
|
 |
 |
 |
|
|
| Conduit Pipe |
"Sign" in the "on" state |
"Sign" in the "off" state |
|
|
|
|
|
|
Space |
|
|
|
|
|
|
| Now we have to position these images on our web page using the HTML editor capable of handling floating boxes - I use Adobe GoLive. |
| s |
|
|
|
|
|
|
|
 |
Open a new document in GoLive "Ctrl N" and drag a "Layout Grid" onto the page from the Palette Menu - "View" ... "Palette" or "Alt 2". In the "Inspector Window" - "View" ... "Inspector" or "Alt 1" you will be able to align the grid on the left, and make the grid size "1 X 1" - you need precise alignment for the floating boxes. |
|
|
|
|
s For goodness sakes put your layout grid on the left side of the page and keep it there! It is the only constant on your page, and when it comes to floating boxes you must have a constant reference point! If you don't do this, you will find your boxes in all sorts of strange positions! |
|
|
 |
Drag a "Floating Box" from the same palette onto the grid. You can enter the coordinate position on the grid by putting numbers into the boxes labeled "Left" and "Top" in "Inspector", or you can drag the box to where you want it - I usually wait until I put the image into the box, and then figure out where it has to go by trial and error. |
|
|
|
|
| Notice in the "Inspector" window that the floating boxes are initially named as "layer", "layer2", etc. You can name these boxes anything you want to by highlighting the "layer" and typing in your preferred name. This really helps later on when you have 6 or 7 layers that you want to keep straight. I name mine by the graphic that I put in there - "offdown", "offup" etc. You can also specify the depth of the layer by entering a numer in the "Depth" box - number 1 is lowest and other numbers arrange the boxes above this depth. We will use this feature later on, so remember this little tidbit. |
|
|
|
 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| Switch "Tabs" on the Palette (see figure above) and drag the "Button image" icon into your floating box. We need this icon instead of a regular "Graphic image" because we have to use the "Action" feature of a button image to work our floating boxes. Add a "Button image" icon to each floating box, add the appropriate image from the "Inspector" (Alt 1), and position them so that they are properly lined up. For the "On-Off Sign" that started all this mess I had 7 floating boxes with one image icon in each one! |
|
|
|
|
|
t |
|
|
|
|
|
|
 |
Here is the basic arrangement and "Depth" of the floating boxes. I did move the top ones over a little bit and down some, so you could grasp the concept. Actually they are right on top of the lower ones. |
|
|
|
|
|
|
| H |
|
|
|
| If all else fails, THROW SOME LOGIC on this puppy: |
|
|
|
| When I click on this image ..... |
|
|
|
|
|
|
| I want these two images to become visible .... |
|
|
|
|
|
| I follow these steps after clicking on this image in the floating box. |
|
|
|
 |
1. - Click the "Actions" Tab of the button inspector. |
|
|
| 2. - Select the trigger for the action - I chose "Mouse Click" |
|
| 3. - Click the "+" sign to add an action. |
|
|
| 4. - Click the "? Action" button and choose "Multimedia" ... "ShowHide" |
|
|
| 5. - Choose the correct floating box in the top menu, and the correct mode in the bottom - in this case the box was "photon" and I chose to "show" this box. |
|
|
|
|
|
|
| By simply repeating the above steps you can attach multiple actions to a single button image. Keep playing around with this feature and soon you will be hiding, showing, moving, etc. all sorts of web page elements. |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
TOP of PAGE |
 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
