There are three (3) named layers that hold three different images for the magic trick, plus one (1) additional layer for the text you are reading now. I'm also using a Dreamweaver Behavior called Show-Hide Layers. You need a hyperlink to connect to a Behavior. In the example on this page layers are needed to appear and disappear on cue.
The images for the Magic Hat Act were placed into individually named layers and then arranged perfectly on the page before I attached any Behaviors to them. The Hat is in the bottom layer named "hat", the Magic Wand is the next layer up named "wand" and then the Rabbit is in the "rabbit" layer is stacked on top. I added one more layer for text named "info" that will appear on cue; that is the layer you are reading now. You can see the layers in the image below. Notice the EYE icons, three of them are closed which means they are currently invisible. The EYE icon for the hat is opened because the hat is always visible.
The first text you see on the page stating: "Click here for a Magic Wand", is really a hyperlink (I've taken off the underline that is normally associated with a hyperlink.) There are three behaviors attached to this link, the first behavior shows the layer named "wand", the second hides an opened layer named "rabbit", and the third hides an opened layer named "info". I want the layers to appear magically when needed and not before, so this Behavior is perfect.
The second hypertext used both on the text and the wand image, states: "Click the Wand for some Magic." This hyperlink has two Behaviors attached to it as seen in the image below. Once you click this link it hides the layer named "wand" and then shows the layer named "rabbit". The second Behavior shows the text layer named "info" so you can read what is happening on the page.
Finally, if you re-click the first hyperlink text "Click here for a Magic Wand", you'll see why there are two extra Show-Hide Layers Behaviors attached. Remember, clicking this link hides the Rabbit and the Info Text but shows the Magic Wand. It just takes a bit of thinking to figure out what the interaction will be with the viewer of your page.
|Layer Name||Left||Top||Width||Height||Z-index||Visibility||Image||ALT Text||Width||Height|
|hat||47px||234px||370px||354px||1||visible||hat-magic.gif||The Magic Hat||370px||354px|
|wand||147px||7px||480px||280px||2||hidden||hat-magic-wand.gif||The Magic Wand||480px||280px|
|rabbit||152px||64px||171px||244px||3||hidden||hat-magic-rabbit.gif||The Magic Rabbit||171px||244px|