Show/Hide Layers with Behaviors

One way to display pictures on your website that cuts down download time is to display one picture at a time using the show hide feature. Place your cursor over the names and it will display a designated picture.

Cute Kids Names







The files I have used can be downloaded here:

Hide Layers Tutorial Files

Create a new HTML document. Save it. Open the tutorial files if you are going to do the activity I created above and save them to the same folder that you saved you html document. Insert the name file shown below centered on your page. To create your own hide layer, first you must create an image file in fireworks. This is the image file I created:

Cute Kids Names



Insert the image centered on your page. Now we are going to apply hotspots to the image above. Click on the image to select it and on the properties panel select the rectangle hotspot tool.

Rectangle Hotspot

Click and draw out three hotspots around each name.

Hot Spot Names

Click the Draw Layer button on the Layout Palette and drag out a new layer.

Draw Layer

A layer can be sized by pulling the handles around the border. This is what the layer drawn out looks like:

Drawn Layer

Go over to the Layers Palette (Window>Layers if it is not open) and you'll notice "Layer 1" has been created. That's the layer you just created. Double click "Layer 1" to rename the layer to "Sissy."

Sissy Layer

Go back to the layer you just created and position your cursor inside the layer and click once. Click the Common tab on the Objects Palette, then click the Insert Image to insert an image into the layer. In this case, I'll insert one of the girl images.

Insert Image

The image of the girl should now appear inside of the first layer. Make sure the image and layer are the same size. Use the adjustment handles to drag the layer close to the picture.

Next turn the visibility off in layer one by clicking on the blue box at the top left corner of the layer to select it.

Select Layer

On the Properties panel select Hidden from the drop down menu to hide the layer's visibility. Also name the Layer ID Sissy by clicking under Layer ID and typing "Sissy."

Hidden Layer

Repeat drawing out two more layers, naming them under Layer ID, and assigning the visibility to hidden. Here is what the layers panel should look like when done.

Three Hidden Layers

To make sure the layers are positioned

To make sure the layers are positioned correctly you can look at two coordinates on properties panel shown below. Make sure that each layer has the same two numbers:

Positioned Layers

Now we need to add behaviors to the hotspots we added to the name menu. Click once on Suzie to select it the hotspot. Notice the Properties panel link box. It should have a # sign in it to let you know that it is a null link. Null links are links that don't go anywhere but are needed to attach behaviors to text.

Null Link

Go over to the Behaviors Palette and click the plus (+) sign (Window>Behaviors if it is not open). From the drop down menu, select Show-Hide Layers.

Show Hide Behavior

Here you'll see the three layers you created for your 3 images.

Behavior Layers

Click the "Suzie" layer and then click "Show" to show the layer. Click OK. Next, select "OnMouseOver" from the drop down list so when your mouse moves over the Suzie menu option the picture will show. Next we need to add a hide behavior so that when you remove your mouse from the "Suzie" link, the girl image disappears.

OnMouse Over

Click the plus sign (+) again and select Show-Hide Layers again. Again select the Suzie layer, this time selecting "hide" from the buttons on the bottom. Click OK. Next, assign the action "onMouseOut" so when the mouse moves off the Suzie name menu option the picture will disappear.

Repeat the show hide behaviors for the Jonathan and Sissy menu options.

Test the page in your browser window by clicking F12.

Dreamweaver 6 Tutorials