| This behavior allows you to dynamically change attributes of the following tags: <layer> <div> <form> <textarea> <span> <img> <select> You can also alter the <input> tags different types such as: radio checkbox text and password The properties that can be altered vary from tag to tag. You might have a variety of reasons why you would consider changing the properties of an object, and in this example, we'll go through the necessary steps to make that happen. To apply the Change Property behavior, follow these steps: -
Create a new document and save it. Save this document as change.html. -
You need to add an element to the document to change and something to trigger that change. Let's change the background color of a layer. Choose Insert, Layer to place a layer within the document. -
Select the layer and name it box in the Properties Inspector. When you're working with behaviors, it's very important to name all your objects. -
Next, type the word Change. After typing the word, select it, and in the Properties Inspector type a pound (#) sign into the Link text field. This surrounds the text with an anchor tag. Remember, behaviors get attached to certain tags, and the anchor tag is one of them. -
With the text selected, open the Behaviors panel. Click the Add Behavior (+) button and choose Change Property from the drop-down menu. This launches the Change Property dialog box as shown in Figure 19.9. Figure 19.9. Choose an object for which you would like to change the property in this dialog box.
-
You'll notice the first option of the dialog box is a drop-down menu to choose the object you want to change. You're more or less selecting a tag in this drop-down menu. Because you want to change the background color of the layer, choose DIV in the drop-down menu. -
The next option offers all the named <div> elements in your document. Select Box. -
In the Property section, choose the Select radio button, and in the drop-down menu to the right of the radio buttons, choose style.backgroundColor. -
In the next drop-down menu, choose the target browser. In this case, I'm going to choose Internet Explorer 4. -
In the New Value text field, type in the hexadecimal value, such as #336699. -
Choose OK, and preview the page in the browser. After you click Change Hyperlink, the layer's background color will change. This is just one example showing how you can use the Change Property behavior. As you can see from different options in the drop-down menus, there's plenty this behavior can offer. If this behavior is a key component in your Web site, be sure to test it in a variety of browsers and operating systems. |
