| |
Layers area special kind of HTML elements, which
can be used as a container to hold other HTML elements and to show
them dynamically using JavaScripts. We can stack more than one layer
over another. One or more Layers can be made visible dynamically,
by hiding others. But using Macromedia Dreamweaver you can do all
this without even knowing JavaScript or coding.
The disadvantage with layers is, they can be viewed only with 4.0
and above browsers. Here in this tutorial let me assume that you
are using 4.0 or above version of the browser.
In this tutorial we are going to use multiple layers stacked over
another, and make it viewable, when the mouse is rolled over in
an Image. In this case study I have taken 2 rollover images Image1,
Image 2 and three layers:Layer1, Layer2 and Layer3.
When we mouse over on the Image1, the second
layer will appear while Layer1 & Layer 3 will be hidden along
with its content. Likewise for the Image 3, Layer1 and 2 will be hidden
and only Layer3 will appear with its content. When we mouse out from
the Images Layer 1 will come up again. To achieve this Follow the
steps and enjoy!
1. Creating rollover Images:
First as I said let us create 2 Images,we can
use Macromedia Fireworks to create the images, In our case I have
designed 4 buttons; 2 for the up state and 2 for the down state. After
desigining the buttons, open a new page in Dreamweaver, create a 2X1
table. Now Insert the images using, Insert>Interactive Images>Rollover
Image. Browse and select the first one for the up state and the second
one for the down state. ( I assume the images or in the proper folder).
Now do it for the next Image, so that both the Images are in the first
column of the table as shown in this example). Now it should look
like this.
2. Placing Layers
Open
Insert>Layer and place the Layer1. Move the layer into the
column2 of the table. Now you can write the content inside the
Layer. Select the layer in the Properties Inspector and select
Overflow as 'visible'. This makes this first layer as default
layer and makes visible while the page is loaded.
|
 |
Note down the position of the Layer(566px and
163px). Insert the second and third layers on the same position, so
that they will sit over the first layer. Now insert the text on those
layers. (Note: Due to the over lapping of layers the text may not
be clear. So, You can place the layers at somewhere else, write down
the text and then change the position of the layers to sit on the
first layers position)
3. Changing
the Layer properties:
 |
Select
Window>Layers. You will get the Layer Inspector, with all
the three layer details. Select the Layer2 and Layer3 and If
the eye is open click on it to close for both of them. In the
properties Inspector you can see the OverFlow is selected as
hidden for Layer2 and Layer3. This enables the Layer2 and 3
to be hidden while the page is loaded. |
4. Adding Behaviors:
|
Now select the Image1 where we are going to add the dynamic
Layer effects. Then Open Window > Behavior. You can see
the Events and actions created by Dreamweaver for the Rollover
Images which we did in the step1. Click on the 
button and select "Show-hide Layers". You will get
this box to 'Show or Hide" the Layers.
Now do the following...
a. Select Layer1 than click on 'Hide'
b. Select Layer2 and click on 'Show' then,
c. Select Layer3 and click on 'Hide'.
This action will make the Layer1 and 3 to disappear and to
show the Layer2 while you move your mouse over the Image1.
|
|
 |
You
can also see the new JavaScript events created by Dreamweaver
in the Behaviors Inspector. Here the new onMouseOver and onMouseOut
with Show-hide Layers as actions.
Note here, You can use other events also as you like. For example
instead of onMouseOver you can use onClick. To do this you need
to click on the tiny black, inverted arrow next to the event.
Use this to select other events, ie OnClick, Down etc.,. At
the foot of the list there is a category which allows you to
choose which browsers to support, make sure a check is next
to 4 and higher browsers. (Only after choosing the browser 4
or higher you will be able to see all the Events in a list) |
Follow the step 4 by selecting Image2.
Then, a.Select Layer1 than click on 'Hide'; b.Select Layer2 and
click on 'Hide' then, c.Select Layer3 and click on 'Show'. This
action will make the Layer1 and Layer2 to disappear and to show
the Layer2 while you move your mouse over the Image1.
5. Bringing
default layer again:
|
Now as a final step, you need to bring back the Layer1 when
you move your mouse out of the Image(Or when you mouse away
from the images at somwhere on that page). Select the Image1
and click on the
button and select "Show-hide Layers". You will get
this box to 'Show or Hide" the Layers.
Now do the following...
a. Select Layer1 than click on 'Show'
b. Select Layer2 and click on 'Hide' then,
c. Select Layer3 and click on 'Hide'.
|
 |
This action will make the Layer2
and Layer3 to disappear and to show the Layer1 while you move your
mouse out of the Image1. Also do not forget to change the Events
to onMouseOut.
Repeat step 5 with Image2 also. Now
you should get the Behavior Inspector like this Image, showing all
the Events for both Image1 & Image2.
Finally let us test it. If everything
is fine, It should work as shown in the the demo. Also click
here to see how we have used in our site.
If you find
this article, write to the author at
Your suggestion to improve this article are welcome. You can also
write about your design and development needs.
|
|
