Search the site








Dreamweaver: Lesson 8 - Dynamic Effects with Layers

To complete our site, we will add the final Secret Cornwall page which makes use of certain dynamic HTML effects to create an interactive site. Dynamic effects, like JavaScript, are attached to events that can be triggered by mouse movements. As the events in this example are produced by the cursor moving over parts of an image, the image must first be sliced so that different sections can cause different effects. If you have a program such as ImageReady or Fireworks to hand, download the image penwith.jpg and open it in one of these applications: using mask tools, each program can create guidelines for slicing the image as well as generating the HTML code to incorporate the image within a web page. Alternatively, download the different pewith_r_*.jpg files and the file penwith_table.htm and cut and paste it into a template file named map.html.

The spliced image should be positioned in the centre of the page, with the file penwith_title.gif and links to each of the top level pages beneath it. The images contained in the table contain four yellow circles and four red stars corresponding to different places that display hidden text on the page. Using the Insert Layer tool, draw four boxes on each side of the map, copying the files penwith1-8.txt into each box. Once text is entered, select each layer from the Layers palette (Window, Layers, or F11) and, in the properties box, set the visible setting to 'hidden'. It is generally easier to work with multiple layers if they are given distinctive names, and you can change the name for each layer in the properties palette.

After making each layer invisible, select the star or circle that corresponds to each one and select the behaviours in the Layers and Behaviors window. At the top of this window are plus and minus buttons to add and remove dynamic effects (or behaviours) to web pages. Click on the plus button and select Show-Hide Layers: a dialog box appears with the names of each layer and buttons to hide or show each layer. Select show for each layer.

Click here to see what the page should look like, then click Back on the browser toolbar to return to this page.

Lesson 1 Lesson 2 Lesson 3 Lesson 4
Lesson 5 Lesson 6 Lesson 7 Lesson 8



© Jason Whittaker 2000-04



You can order copies of the following books:
Web Production for Writers and Journalists in paperback.
The Internet: The Basics in paperback.
The Cyberspace Handbook in paperback.