Web Page Design

Show Hide Layers

Part 1 – Insert Show-Hide Layers Behavior

1. With the donate.html page open, click after the word Donations and
press the enter key.
2. Type: Select the buttons below to learn how to donate to the
Centuryville Community Center.
3. Highlight the text that you just typed.
 Format the text size to 20 pixels. (You may have to type that in if
it is not a choice form the drop-down menu)
 Font color black.
 Unbold and align left.
4. Click to the right of the letter “r” in center to deselect the text and
press enter.
5. On the Insert toolbar, click images and select image.
a. Browse to the MTComputers>Scook>Bike and Hike Images
folder.
b. Select button_funds.gif and click OK.
c. If necessary, in the warning box, click Yes.
d. Insert the file and save it in your site’s images folder.
e. In the Alt text box in the Properties Inspector, type: Funds.
6. Click to the right of the image that you just inserted.
7. On the Insert toolbar, click images and select image.
a. Browse to the MTComputers>Scook>Bike and Hike Images
folder.
b. Select button_resale.gif and click OK.
c. If necessary, in the warning box, click Yes.
d. Insert the file and save it in your site’s images folder.
e. In the Alt text box in the Properties Inspector, type: Resale.
8. Your screen should look like this:

9. Click to the right of the resale button.

 Web Page Design
Show Hide Layers
 Press enter once.
 On the Insert toolbar (not drop-down menu with words), click
the Common drop-down arrow and select Layout.

 Make sure Standard mode is selected and click Draw Layer

button.

 Click and drag a layer box as shown below

 Web Page Design
Show Hide Layers
b. Click inside the layer and type:

Donate funds in the amount of:

• $25
• $50
• $100
• $500

f. Format the text to Arial, 20 pixels.

10. Click the layer’s top-left handle. The properties inspector view
changes.
a. In the L box, type: 272 pixels.
b. In the T box, type: 290 pixels.
c. Click the Vis drop-down arrow and select hidden.
d. Under Layer ID, type: funds.
11. Your screen should look similar to this:

12. Click on any empty area of the Web page to deselect the layer. (It
will become invisible.)
13. Click Draw Layer again to create a second layer that is
approximately the same size as the first.
a. Inside the layer, type in the following text:
Donate goods for resale such as:
• Electronics
• Appliances
• Clothes
• Furniture
 Web Page Design
Show Hide Layers

b. Repeat steps 10 a through d above except under Layer ID type:

resale.
14. Select the funds graphic.
a. In the Properties inspector, in the Link box, type the number sign
(#).
b. This creates a link around the graphic that does not have to link to a
file or to a Web page.
c. Do not click off of the funds graphic.
15. Press Shift+F4 to open the Behaviors panel on the right side of your
screen.
a. In the panel, click the plus sign (+) drop-down arrow.
b. Select Show-Hide Layers.
16. In the Show-Hide Layers dialog box, in the named layers box,
select layer “funds” and click show.
17. Select layer “resale” and click hide.
18. Your dialog box should look like the one below.

19. Select the funds graphic.

a. In the Properties inspector, in the Link box, type the number sign
(#).
b. This creates a link around the graphic that does not have to link to a
file or to a Web page.
c. Do not click off of the funds graphic.
20. Press Shift+F4 to open the Behaviors panel on the right side of your
screen.
a. In the panel, click the plus sign (+) drop-down arrow.
 Web Page Design
Show Hide Layers
b. Select Show-Hide Layers.
21. In the Show-Hide Layers dialog box, in the named layers box,
select layer “funds” and click show.
22. Select layer “resale” and click hide.
23. Your dialog box should look like the one below.

24. Be sure that you have clicked on the “Funds” button to activate
the Behaviors panel.
25. In the Behaviors panel, click the plus sign (+).
a. Select Show-Hide Layers.
b. In the dialog box, select layers “funds” and click
Hide.
c. Select layer “resale” and click Hide.
d. Click ok.
26. In the behaviors panel, in the first line, click
directly on the world onLoad. Click the drop-down
arrow that appears and select <A>onMouseOver. In
the second line, click directly on the word onLoad and select <A>on
MouseOut.
27. Select the Resale graphic.
28. In the Properties inspector, in the Link box, type the number sign
(#).
29. In the Behaviors panel, click the plus sign (+) drop-down arrow.
a. Select show-hide layers.
b. In the dialog box, select layer “funds” and click hide.
c. Select layer “resale” and click show.
d. Click ok.
 Web Page Design
Show Hide Layers
e. With the layer “resale” still selected, select show-hide layers
again.
f. In the dialog box, select layer “funds” and click hide.
g. Select layer “resale” and click hide.
h. Click ok.
i. You will now have onLoad on two lines in the Behaviors panel
30. In the behaviors panel, in the first line, click directly on the word
onLoad.
a. Click the drop-down arrow that appears and select
<A>onMouseOver.
b. In the second line, click directly on the word onLoad and select
<A>onMouseOut.
31. Save your file and preview the page in a browser.
32. When you position the mouse pointer over the Funds button, the
funds layer appears.
33. When you position the mouse pointer over the resale button, the
resale layer appears.
34. The layers disappear as soon as you move the pointer off the buttons.
35. Save your work.
36. Close your donate.html page.