This chapter is from the book
This chapter is from the book
This chapter is from the book
Change Property
Change Property is a flexible but oddly uncharming behavior that allows you to let the user's movements affect attributes of many different kinds of tags, from layers, to text, to forms.
The most skeletal of the dialog boxes that Macromedia includes as a Dreamweaver behavior, the Change Property behavior, is not the most intuitive or user-friendly behavior, in terms of the hints it gives you as to how to use it—but it can be quite powerful in the right hands.
In this section, we'll show you how to use the Change Property behavior to change the background color of a layer, the font size of some text, and we'll also look at how to change arbitrary chunks of text.
In these examples, we'll be triggering the behavior by clicking on an image, but you could use any valid event to trigger the Change Property behavior. Again, consult Tarin's Macromedia Dreamweaver MX for Windows and Macintosh: Visual QuickStart Guide for more detail on the possible events.
To change the background color of a layer:
Create a new HTML file.
Insert an image onto the page.
From the menu bar, choose Insert > Layer to add a new layer to the page (Figure 13.8).
Figure
13.8 The new layer appears at the insertion point.Add some text to the layer.
Select the image you inserted earlier.
In the Behaviors panel, click on the + (plus) button and select Change Property from the drop-down menu.
The Change Property dialog box will appear (Figure 13.9).
Figure
13.9 The Change Property dialog box is center stage for all work you'll
do with the Change Property behavior. From the Type of Object drop-down menu, select DIV.
From the Named Object drop-down menu, select div "Layer 1".
In the first Property drop-down menu, select style.backgroundColor.
In the New Value text box, enter #CC0000. Your dialog box should now look something like Figure 13.10.
Figure
13.10 Here, we're changing the background color of a layer. Click OK to close the dialog box.
In the Behaviors panel, click on the down arrow next to the behavior and select onClick from the drop-down menu.
Preview the page in your browser. Click on the image. The layer background should turn red (Figure 13.11).
Figure
13.11 Mouse over the image, and the layer's background color changes.
(If this book were in color, the new background would be red, not gray.)
)
Figure
13.8 )
Figure
13.9)
Figure
13.10 )
Figure
13.11That wasn't too hard, was it? Don't worry, it gets harder!
The next two examples are going to require a little HTML tinkering. We'll be using the <span> tag, which is an arbitrary container for HTML. We call it arbitrary because it's meant as a marker for applying styles and it doesn't do anything by itself, unlike, say, a <p> tag, which adds a blank line of space on the page before and after the tag.
To add a <span> to your page:
Type some text onto an HTML page.
In Code view, click before the text you want to include in the span, and type <span id="testspan">, and then type </span> after the text you want to include (Figure 13.12).
Figure
13.12 Wrapping a <span> tag around HTML or text makes the span
contents modifiable in JavaScript. It also doesn't innately affect the
visual presentation of the text. Press F5 to refresh the design view. It shouldn't look any different.
)
Figure
13.12 Now that your text is enclosed in a span, you can change various properties of it using the Change Property behavior.
To change the size of the text:
Add a span of text to your page, as in the previous list.
Add an image to your page.
Select the image.
In the Behaviors panel, click on the + (plus) button and select Change Property from the drop-down menu.
The Change Property dialog box will appear.
In the Type of Object drop-down menu, select SPAN.
In the Named Object drop-down, select the named span you added to the page.
From the Property drop-down menu, select style.fontSize.
In the New Value text box, enter 36 (Figure 13.13).
Figure
13.13 As is often the case with test pages, we're choosing obvious
formatting changes over sumptuous typography. Click OK to close the dialog box.
In the Behaviors panel, click on the down arrow next to the behavior and select onClick from the drop-down menu.
Preview your file in a browser. Click on the image. The text size should change (Figure 13.14).
Figure
13.14 See?
)
Figure
13.13 )
Figure
13.14In addition to twiddling the size, color or face of the font in a span, you can also change the actual text inside a span. If you're willing to muck around with the HTML a little bit, you can even use JavaScript to fill in the text.
We'll look at how to use Change Property to display the current date and time.
To change the text in a span:
Follow Steps 1 through 6 in the previous list.
From the Property drop-down menu, select innerHTML.
In the New Value text box, enter Date(). Your dialog box should resemble Figure 13.15.
Figure
13.15 You have to jigger the code a little to get the actual date to show
up. Click OK to close the dialog box.
In the Behaviors panel, click on the down arrow next to the behavior and select onClick from the drop-down menu.
Preview the file in your browser and click on the image.
You'll get little or no reaction. That's clearly not what we want, so we need to tweak the file a little.
In Code view, find the code that calls the behavior.
It should be something like
onClick="MM_changeProp('test','',
'innerHTML','Date()','SPAN')".Delete the single quotes that surround Date().
Preview the file again in your browser. Now you should get something like Figure 13.16.
Figure
13.16 Consult a good JavaScript reference to see how to format the date the
way you want it.
)
Figure
13.15 )
Figure
13.16