Boy 1
Boy2
Girl 1
Girl2
Girl3

Show Hide Behaviors in Dreamweaver

For this activity you will create a show hide behavior of thumbnails that when your cursor rolls over them they will open a large picture of your thumbnail. You can see the result below:

 

 

 

 

 

 

 

 

 

 

 

 

Boy
Boy
Girl
Girl 2
Girl 3

Insert Table:

Create a new document and then save it to your site folder. Make sure you type a title in title text box. Insert or type your title for the page centered at the top of your page. Click the enter key to place your cursor below your title. Next insert a table with 2 rows and the number of columns will depend on the number of thumbnails you have. Merge the top row of your table and then insert the thumbnails in the bottom row. You want your top row to be large so with your mouse in the top cell click the Enter key several times to make room for your large picture.

Insert Table Windows How To Video Insert Table Flash How To Video

Insert Hotspots:

Next you will place a hotspot over each of the thumbnails. Click on one of the thumbnails to select it and then on the properties panel select the rectangle hotspot tool:

Rectangle Hotspot

Click and draw out a hotspot around each of the thumbnails. You will know the hotspot is present because the thumbnail will now appear blue:

Hotspot Applied

Windows How To Video
Flash How to Video

Create Layers:

Now you will create layers for each thumbnail that will house the larger picture. First open the large picture in Fireworks so we can get the exact size of the picture. This will provide you with the dimensions of your actual layer size. It is located at the bottom right side of your document window.

Picture Size

Return to Dreamweaver then place your cursor in the top row of your table. Make sure you have enough space in the row to hold your layer. Click the Common button Common Button on the top of your document and select layout from the drop down menu.

Common Layout

Click on the draw layer button on the Layout Palette and drag out a new layer in the top row:

Draw Layer

Click on the top left corner of the layer to select it.
Select Layer

Layer Properties:

On the Properties panel make sure the W and H are the size of your picture (you got this when you opened your picture in Fireworks). The L and T are where you top left insertion point will be. This should be the same for all your pictures. The layer should appear to be centered across on the table.

Layer Properties

Rename Layer 1:

On the layer palette (Windows > Layers) you will now see Layer 1 has been created. Double click on the text Layer 1 in the Layers palette and rename it something that goes along with your thumbnail.

Rename Layer

Insert Image:

Go back to the layer you just created and position your cursor inside the layer by clicking in it. Click back on the Common button at the top of your document window, then click Insert Image to insert an image into the layer. Make sure that you assign Alternate text to your photo at the Image Tag Accessibility Attributes dialog box:

Image Attributes

Your image should now appear inside of the first layer. Mae sure the image and layer are the same size.

Turn Visibility Off:

First you will turn the visibility off in your layer because you don't want it to appear when the page loads. Click 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. Make sure that the name of the layer ID is the name you assigned to the layer.

Layer Visibiliity

Repeat:

Insert Layers Windows Video Insert Layers Flash Video

Adding Behaviors:

There are two behaviors you will add to each thumbnail:

  1. On mouse over you will show the large picture of the thumbnail.
  2. On mouse out you will hide the large picture of the thumbnail.

Now you will need to add behaviors to the hotspots. Click once on the hotspot thumbnail you want to add a behavior to. The behavior we want to add is to show-hide the large picture that is associated with the thumbnail picture. Once you click on the thumbnail you will notice on the properties panel that the link box contains a # sign. This lets you know that it is a null link. Null links are links that don't go anywhere but are needed to attach behaviors to.

Null Link

Open the behaviors palette (Window > Behaviors) and click on the plus sign to access the drop down menu. Select Show-Hide Layers.

Show Hide Behavior

Now you should see a list of layers you already created.

Layers Created

Click the layer you want to apply the behavior to (the large picture of the thumbnail) 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 thumbnail the picture will show. Next we need to add a hide behavior so that when you remove your mouse from the thumbnail link, the large image will disappear.

On Mouse Over

Click the plus sign (+) again and select Show-Hide Layers again. Again select the large picture 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 thumbnail menu option the picture will disappear.

Windows How to Video Flash How to Video

Nicholson's Lesson Plan Blues