Controlling Layer Contents

[ LiB ]

An alternative approach to putting nested content on pages is to change the contents of a single layer instead of hiding and showing multiple layers . In Dreamweaver, you do this with the Set Text of Layer behavior.

As coded by Dreamweaver, the Set Text of Layer behavior works in IE 4+, Netscape 4, and Netscape 6/Mozilla. It does not work in Opera 5 and 6, but it does work in Opera 7.

The Basics of Setting Layer Text

The Set Layer Text behavior is tucked away in the Set Text submenu of the Behaviors panel's Actions pop-up menu. Choosing it brings up a dialog box in which you can choose any of your document's layers and enter any text you want to appear in that layer (see Figure 14.11). Whatever you enter here will replace the existing layer contents, regardless of the contents. You can even change the contents of the layer containing the object the behavior is attached to. If you leave the dialog box's input area empty, the contents of the specified layer will be deleted.

Figure 14.11. The Set Text of Layer behavior in the Behaviors panel Action list, and the dialog box it calls up.

Working Smart with Set Text of Layer

What can you do to really take advantage of this behavior?

Setting More Than Text

Despite its name , Set Text of Layer is not limited to text effects. You can use it to put almost any content into a layer, by entering HTML code rather than straight text into the input field of the dialog box. Code such as this will display in a formatted text message in the specified layer:

 <h1>Welcome!</h1> <p>Are you ready for the <b>big</b> moment?</p>

Tables and images, links, and forms can all be written into layers using this behavior. A more accurate description for the behavior might be "Set HTML Content of Layer."

Here are a few tips to consider when using Set Text of Layer.

Watch Those Quotes

Whatever text or HTML you enter in the dialog box will be inserted into the behavior's function call, like this:

 onClick="MM_setTextOfLayer('Layer1','','Hello World')"

If you have set your Code Rewriting Preferences to URL-encode special characters and attribute values, any HTML source code that you enter will be inserted into your page code looking like this:

 onClick="MM_setTextOfLayer('help','','%3Cimg src=%22duck.gif%22  width=%2250%22 height=%2250%22%3E')"

Although this code will work perfectly fine in a browser, it isn't too readable if you later want to hand-edit your HTML. You can avoid this mess by going to Edit > Preferences > Code Rewriting (Mac OS X: Dreamweaver > Preferences > Code Rewriting) and disabling both Special Characters optionsthe Encode Special Characters in URLs and Encode <, >, &, and " in Attribute Values Using & options. With these options deselected, Dreamweaver will escape all quotes with \ and leave all other characters alone. If you do this, however, you must include only single quotes in your HTML code. This code, for instance, will break the behavior:

For a full discussion of functions and function calls in Dreamweaver behaviors, see the section "Working with Behaviors in Dreamweaver" in Chapter 13. For more on the Code Rewriting preferences, see the section "Using Dreamweaver as a Text Editor" in Chapter 27, "Writing Code in Dreamweaver."

 <img src="duck.gif" width="50" height="50">

But this code will work fine:

 <img src='duck.gif' width='50' height='50'>

It will be inserted into your page code as the following function call:

 onClick="MM_setTextOfLayer('violin','','<img src=\'duck.gif\'  width=\'50\' height=\'50\'>')"

Avoid Hand-Coding

If you want to insert HTML formatting using Set Text of Layer, but you don't want to type all that code yourself, work smart with Dreamweaver.

Create the desired display in Design view, either in the same file you're working on or in a temporary file. Then go to Code view and copy the code from there. Open the Set Text of Layer dialog box, click in the input area, and paste. Remember, though, that Dreamweaver always encloses tag attributes in double quotes. So, if you have disabled the Special Characters options as described earlier, you'll have to replace all double quotes with single quotes, either by hand or by using the Find and Replace command, before the behavior will work.

Don't Include Media Objects

Some browsers won't display embedded media properly when the <embed> code appears as part of this command. Media objects and layers often don't mix well.

Exercise 14.2. Setting Layer Text to Display Context-Sensitive Information

This exercise builds an interactive illustration that puts different data in an information layer depending on what part of the illustration the mouse rolls over. All the files for the exercise can be found in the chapter_14/violin folder on the book's website.

Open and examine violin_write.html . This file, pictured in Figure 14.12, presents the user with a picture of a violin. Image map hotspots will be used to trigger a behavior that puts different information in the help layer as the user 's mouse rolls over those parts of the illustration. If you browse this file, you'll see that some of the hotspots already trigger basic text-only information to appear. You'll be adding the same behavior to the remaining hotspots and then dressing up the way the contextual information displays. (To see the final presentation in action, browse to violin_write_finished.html .)

Figure 14.12. The violin_write.html presentation as it should appear in the browser when complete.
Select the hotspot at the top of the violin picture. Open the Behaviors panel and choose Set Text of Layer from the Actions list. In the dialog box, choose the help layer from the pop-up menu, and type the word Scroll in the input field. When you have finished, make sure the event triggering the action is onMouseOver . Figure 14.13 shows the dialog box with information entered.

Figure 14.13. The Set Text of Layer dialog box, set to enter a simple text message in the help layer.

You also need to blank out the help layer when the mouse rolls off the violin scroll. With the same hotspot selected, add another instance of the Set Text of Layer behavior. Choose the help layer from the pop-up menu again, but this time leave the input field blank (enter no text). When you're done, change the trigger event to onMouseOut .

Repeat the procedure for the hotspot directly below this one, configuring it to show the word Neck upon onMouseOver . Make sure you preview in the browser to make sure you've coded the effect properly before proceeding to the next step.
Now make the Scroll and Neck messages a bit fancier. Select the top hotspot and double-click its onMouseOver behavior to edit the text that will appear. Replace the original message with this code:
```
 <h1>Scroll</h1> <p>Scrolls are curly and brown, and have wooden pegs  sticking _out of both sides.</p> 
```
Close the dialog box and choose Preview in Browser. Rolling over the violin scroll should now display information like that shown in Figure 14.14.

Figure 14.14. The Set Text of Layer behavior used to display HTML-formatted text.
After you've verified that your behavior is working, check your code to see how the HTML was inserted into the function call. (You can do this quickly by going to Code and Design view and selecting the hotspot in the Design View portion of the Document window.) Depending on how your URL encoding preferences are set, you might see a mess like this:
```
 <area onMouseOver="MM_setTextOfLayer('violin','',  '%3Ch1%3EScroll%3C/h1%3E%0D%3Cp%3E Scrolls are curly and  brown, and have wooden pegs sticking out of both  sides.%3C/p%3E')" shape="rect" coords="65,3,145,89"  href="#"> 
```
To clean up this code, go to Edit > Preferences, and choose the Code Rewriting category. Deselect both Special Characters options. When this is done, return to the Behaviors panel and double-click the scroll hotspot's Set Text of Layer behavior to open its dialog box. You don't need to change anything in the dialog box; just click OK. Check your code again, and you should see a more readable function call than before:
```
 <area onMouseOver="MM_setTextOfLayer('violin','','  <h1>Scroll</h1><p> Scrolls are curly and brown, and have  wooden pegs sticking out of both sides.</p>')"  shape="rect" coords="65,3,145,89" href="#"> 
```
For the Neck hotspot, use Dreamweaver to help write the formatted code. Create a new Dreamweaver file, and save it in the chapter_14/violin folder as temp.html .

In temp.html , type the following text:
```
 Neck Violin necks are long and skinny, and since they're made of  wood they're not much good for swallowing. 
```
Now use the Property Inspector to format the first line as <h1> and the rest as <p> .

Go to Code view, select all the HTML code for the formatted text, and copy it. (If you copy directly from Design view, you'll get only the text, not the formatting code.)

Back in violin_write.html , select the Neck hotspot and open its Set Text of Layer behavior for editing. Delete the contents of the input field and paste in the HTML code from the temporary file. Preview in the browser again; rolling over the Scroll and Neck hotspots should display similarly formatted text in the help layer. If you changed your Code Rewriting preferences in the previous step, your page's source code should contain a nice, readable (nonencoded) chunk of HTML in the Neck hotspot's function call.
To make things even fancier, replace the <h1> title with a GIF image, again using the temp.html file as a handy code-creating workshop.

Open temp.html (or bring it to the front) and go to Code and Design view. In the Design portion of the Document window, delete the heading; in its place, insert the image scroll.gif . Figure 14.15 shows how the revised scroll message should appear in the temp file.

Figure 14.15. Creating a fancier chunk of display information in temp.html.

If you have disabled URL encoding in your preferences, you'll need to replace all double quotes with single quotes. To do this, go to Edit > Find and Replace. Set your search parameters to Current Document and Source Code. Search for double quotes ( " ) and replace with single quotes ( " ). Because this is only a temp file, go ahead and click the Replace All button to perform the search quickly.

When this is complete, activate the Code view portion of the Document window, and select and copy all the code for the image and text. Then go back to violin_write.html , open the Scroll hotspot's behavior for editing, and replace its contents with the new code.

Preview your violin page in the browser. If you entered your code correctly, you should see a result like that shown in Figure 14.12. If your browser preview doesn't work properly, double-check the code for your page. The scroll hotspot's event handler should contain escaped single quotes.

Let Dreamweaver's color coding work for you. If your pasted code contains incorrect quote marks, the improperly terminated string literals will turn black. If the quote marks are correct, the entire function call (everything after onMouseOver=) will be blue.

If you want to complete the violin-browsing experience and get some practice with this behavior, repeat the previous steps to dress up the rest of the violin hotspots. All the required GIF images are in the chapter_14/violin folder.

Using CSS Layer Styles to Format Text

A lovely, efficient way to put nicely formatted text into a layer without having to enter and re-enter the HTML formatting for each new set of text is to assign a custom CSS class to the layer itself. It works this way (see Figure 14.16):

Figure 14.16. Setting up and applying a CSS class to control the formatting of a layer that will have its content set dynamically.

Create the layer you're going to be targeting with the behavior.
Using the CSS Styles panel (or the CSS tab of the Tag Inspector), create a new custom class. Include any text formatting, positioning, or layer formatting you want in this style.
In Design view, select the layer and apply the style to it.

After this is done, whenever you Set Text of Layer, you need to enter only the text itself. All formatting will be supplied.

Set Text of Layer or Show-Hide Layers?

Repeatedly setting the text of a single layer can create a similar effect to starting with a stack of hidden layers and showing them one at a time. Why choose one method over another?

Loading and preloading. If all of the document's content is present when the page initially loads (as it is when using Show-Hide Layers), it will all display immediately when called on. Depending on your project, you might decide that this is a good thing or a bad thing. If you know ahead of time that users are probably going to access all the content, you'll want to download it as soon as possibleso use Show-Hide Layers. If you think users will probably want to access only one or two layers' worth of contents, you might not want to make them wait for the other layers' content to downloadso use Set Text of Layer.
Simple text changes. If your content all consists of similarly formatted text, it will probably be more efficient to create and edit content using Set Text of Layer. You can use a CSS style applied to the layer to control formatting, and you need enter only unformatted text in the behavior's dialog box.
Different content, identical layers. If your content will all appear in the same position on the page, it's easier to format, resize, and position one layer than several. Use Set Text of Layer.
Browser compatibility. Setting layer text as it is scripted in the Dreamweaver behavior is supported by all current versions of Netscape and IE, but not by versions of Opera earlier than Opera 7. If this extra browser support is important to you, stick with Show-Hide Layers.