Changing text colour with mouse over effect

Activity 5

Procedure1. Start Dreamweaver and select the ‘Hong Kong Scenery’

web site.2. Open the web page photo.html. Select the title ‘Hong

Kong Scenery’ and click the ‘Split’ button .Enter the ID attribute in the <div> tag as follows:

Activity 5

Changing text colour with mouse over effect

3. In the Tag Inspector, click the ‘Add behavior’ button of the ‘Behaviors’ tab and select ‘Change Property’.

Activity 5

Changing text colour with mouse over effect

4. Make sure is displayed in the ‘Element ID’ pull-down menu. Select the ‘color’ property and enter ‘white’ as the new value.

Activity 5

Changing text colour with mouse over effect

5. Change the event of the behavior to ‘onMouseOver’ in the Tag Inspector.

Activity 5

Changing text colour with mouse over effect

6. Repeat step 3 to add another ‘Change Property’ behavior to the title. In this case, set the new colour value to ‘black’ so that the original colour of the title can be restored.

Activity 5

Changing text colour with mouse over effect

7. Change the event of the second ‘Change Property’ behavior to ‘onMouseOut’. The title will resume its original colour when the mouse leaves the title.

Activity 5

Changing text colour with mouse over effect

8. Test the web page with a browser.

Title remains blackwhen mouse is ‘out’.

Title changes to whitewhen mouse is ‘over’.

Activity 5

Changing text colour with mouse over effect

8. Test the web page with a browser.

Title remains blackwhen mouse is ‘out’.

Title changes to whitewhen mouse is ‘over’.

Activity 5

Changing text colour with mouse over effect