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.
 |
The files I have used can be downloaded here:
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:
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.
Click and draw out three hotspots around each name.
Click the Draw Layer button on the Layout Palette and drag out a new layer.
A layer can be sized by pulling the handles around the border. This is what the layer drawn out looks like:
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."
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.
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.
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."
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.
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:
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.
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.
Here you'll see the three layers you created for your 3 images.
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.
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.
