Creating Interactivity, Using dynamic links on a web page.


Student Learning Outcomes:

1. Insert an interactive button
2. Modify the appearance of an interactive button
3. Change the button text
4. Create a jump menu
5. Create swap images
6. Create an image map
7. Define hotspots
8. Determine which hotspot shape to use.
9. Draw a hotspot
10. Modify a hotspot.

Important Points:

1. An object is any item that can be individually selected and acted upon.
2. A behavior is what you want the object to perform also referred to as an action.
3. An event triggers an action to take place.
4. Expression Web Behaviors

Expression Web Behaviors

5. List of common events.

Common Events

6. Navigational bar is a list of links ina tale or girld like order.
7. An interactive button changes its appearance when the pointer hovers over the image - called the rollover effect.
8. Create an interactive button.
a. Click insert on menu bar.
b. Click interactive button:  You will see:

Interactive button dialog box

c. Select the type of button desired.
d. Click in the text box and type in the name you want on the button.  Keep it short.
e. To specify a target page for button click in the link box.  You will see:

Edit Hperlinki

f. Browse to the hyperlink or type it in the address.

9. Change the font on interactive button.  Click the font tab on the interactive buttons dialog box.  You will see:

Font Tab on Interactive Button Dialog Box

a. Here you can select the font, font style, point size, original font color, hovered font color and pressed font color .and the text alignment.

10. Edit the button image:  Click on the image tab of the Interactive Buttons dialog box. You will see:

Image tab of interactive dialog box

a. here you can decrease/increase width and height, make jpg or gif, and create hover image, pressed imaged or preload button images.

11. To copy and paste a button:
a. right click, click copy, place cursor where you want button, right click, paste.
b. to edit button; double click the pasted button which opens the interactive button dialog box and change the button settings to the desired ones.

12. Creating a jump menu.
a. Click task pane on menu bar, click behaviors. You will see:

Behaviors task pane

b. Click the insert button:  You will see:

Insert tab on behaviors task pane

c. Click Jump Menu:  You will see:

Jump Menu dialog box

e. Click the Add button:  You will see:

Add choice dialog box.

f. In the choice box type in your description and in the value box put the url for the web page to be brought when the choice is made.
and click ok.
g. Repeat the process for each additional choice in the jump menu.  Once you have added all of your choices click ok and the jump menu will be created.

13. Creating a Swap Image - exchanges one image for another when the user passes the pointer over an image.

a. Select the image and then in behaviors task pane, click insert button, click swap image you will see:

Swap Image dialog box

b. in the swap image url type the name of the file you want the image to swap with.

14. Creating an image map - an image that is divided into section so that the same image serves as the location for several links called hotspots.
a. Select the image, make the picture toolbar active, pick from the picture toolbar either circular, rectangular or polygonal hotspot.
b. on the image draw the hotspot, put the url in the hyperlink dialog box, click ok.

Best Practices: