The Change Property behavior allows you to change properties, such as font styles, borders or visibility, for an element on a Web page.. Changing Element Properties Use the Change Prope
Trang 1The Change Property behavior allows you to change properties, such
as font styles, borders or visibility, for an element on a Web page The Change Property behavior is useful for adding interactivity to a Web page For example, you can have the Change Property behavior display
a text description or link address when a user points to a picture on a page Along with the Change Property behavior, you can also use the Change Property Restore behavior, which restores the most recent property changes made by the Change Property behavior When you use the Change Property Restore behavior, Dreamweaver displays a message dialog box acknowledging the use of the behavior You can double-click the behavior to display a list of properties being restored
Changing Element
Properties
Use the Change Property
Behavior
Open the Web page you want to
apply a behavior
Click the Window menu, and then
click Behaviors to display the
Behaviors panel
Click the element you want to add
the Change Property behavior (in
this example, select the cell phone
image)
Click the Add Behavior button
(plus sign), and then click Change
Property.
A dialog box appears, allowing you
to set the details of the action
Click the Type Of Element list
arrow, and then select the type
you want to change (in this
example, select DIV)
Click the Element ID list arrow, and
then select an ID (in this example,
select div “apTextSign”)
The AP element to the right of the
cell phone image contains text,
which you’ll change the font size
to a larger size
6
5
4
3
2
1
3
2
4 1
Trang 2Click the Select option and select
the property you want to change
(in this example, select fontSize),
or click the Enter option and enter
the property you want to change
Enter the new value you want (in
this example, enter 24)
Click OK.
To change the trigger, click the
event, click the Event list arrow,
and then select the event you
want
10
9
8
8
9
7 6
Point here to change property
Font size changes to
24 pt.
10
Trang 3The Drag AP Element behavior allows you let visitors on a Web page to drag an AP (Absolute Positioned) element This behavior is useful for creating interactive training, games, and interface controls, such as a slider The behavior allows you to specify how you want the AP ele-ment to move You can constrain the moveele-ment in a specific direction,
to a specific location or target, or to snap to another element In order
to use the Drag AP Element behavior, you need to call the behavior before the visitor can drag the element To achieve this, you need to attach the Drag AP Element behavior to the body object with the onLoad event
Dragging an AP
Element
Use the Drag AP Element
Behavior
Open the Web page you want to
apply a behavior
Click the Window menu, and then
click Behaviors to display the
Behaviors panel
Create the AP Element you want to
add the Drag AP Element behavior
Click <body> in the tag selector in
the Document window
Click the Add Behavior button
(plus sign), and then click Drag AP
Element.
A dialog box appears displaying
the Basic tab
Click the Movement list arrow, and
then click Constrained or
Unconstrained.
If you selected the Constrained
option, enter values for Up, Down,
Left, and Right (in pixels)
The values are relative to the
starting position of the AP
element To constrain movement,
use the following methods:
◆ Rectangle Enter positive
values in all four boxes
◆ Vertical Enter positive values
for Up and Down and 0 for Left
and Right
7
6
5
4
3
2
1
4
1
5 2
Trang 4◆ Horizontal Enter positive
values for Left and Right and 0
for Up and Down
Enter values for the Drop Target in
the available Up, Down, Left, and
Right boxes (in pixels), or click Get
Current Position to automatically
insert the current position of the
AP element
The drop target is the spot where
you want the visitor to drag the AP
element Values are relative to the
top left corner of the browser
window
Enter a Snap If Within value (in
pixels) to specify how close the
visitor needs to be to the drop
target before the AP element
snaps to the target
To define the drag handle, track
movement, and trigger an action,
click the Advanced tab.
◆ Drag Handle Click the list
arrow, and then select Entire
Element or Area Within
Element For an area, enter
values for the area you want
within the element
◆ While Dragging Select the
Bring Element To Front, then
check box, select a position,
and then enter the script code
or function you want executed
during the drag
◆ When Dropped Enter the script
code or function you want
executed when dropped, and
then select the Only If Snapped
check box to execute the code
only if snapped
Click OK.
To change the trigger, click the
event, click the Event list arrow,
and then select the event you
want
12
11
10
9
8
Select the advanced options you want
12
Trang 5The Show-Hide Elements behavior allows you to show, hide, or restore the visibility of elements on a page This behavior is useful for display-ing information or providdisplay-ing interaction when a visitor points to an ele-ment For example, when a visitor points to a picture or a text box, you can display information about the item to provide added value and some interactivity When the visitor moves the pointer away, you can restore the element back to its original state
Showing and Hiding
Elements
Show or Hide Page Elements
Open the Web page you want to
apply a behavior
Click the Window menu, and then
click Behaviors to display the
Behaviors panel
Click the element you want to add
a behavior
Click the Add Behavior button
(plus sign), and then click
Show-Hide Elements.
A dialog box appears, allowing you
to set the details of the action
Click the element you want to
show, hide, or restore
Click Show, Hide, or Default,
which restores the default visibility
of the element
Repeat steps 5 and 6 for each
element you want
Click OK.
To change the trigger, click the
event, click the Event list arrow,
and then select the event you
want
9
8
7
6
5
4
3
2
6
8
4
9
Trang 6The Call JavaScript behavior runs a line of script when an event occurs The behavior only runs one line of script, which means you can execute a single line of code or a procedure that calls a section of code To use the Call JavaScript behavior, you need JavaScript experi-ence and coding knowledge, which is outside the scope of this book
Executing a
JavaScript
Use the Call JavaScript
Behavior
Open the Web page you want to
apply a behavior
Click the Window menu, and then
click Behaviors to display the
Behaviors panel
Click the element you want to add
a behavior
Click the Add Behavior button
(plus sign), and then click Call
JavaScript.
A dialog box appears, allowing you
to set the details of the action
Type the line of script you want to
run
Click OK.
To change the trigger, click the
event, click the Event list arrow,
and then select the event you
want
7
6
5
4
3
2
1
1
4
5
6
Trang 7This page intentionally left blank