Building Interactive Web Pages Part 2 - Adding Script Effects

Adding Rollover Text, Swap Image Effect, and a Slideshow

The Rollover Text effect makes a text, for instance, a menu name or link, change color or appearance when a mouse action such as a mouseover occurs. The Swap Image effect replaces an image with another when a mouse action such as a mouseover occurs. It then displays the original image again when the same or another mouse action occurs. In this section, we will apply the Rollover Text and Swap Image script effects to the objects on the left panel. You will also learn how to create a slideshow and add playback buttons.

Open web3.UFO. The script effects will be applied as follows:

Step One: Slice the Web page

Select the Slice Tool on the Tool Panel, then click Auto Slice on the Attribute Toolbar. The whole page will be automatically sliced, and you will see the three HTML text items on the left panel sliced into individual cells.

Step Two: Create Rollover Text

Click the Historical Sites cell to select it, then right-click on the same cell and select Script Effects: Rollover Text to open the Rollover Text dialog box.

There are various types of mouse actions or events that you can use to trigger the effect. For this example, select onMouseOver as the event, then select Display effect onMouseOver event.

Next, specify what the rollover text will look like. In this example, we will format the text as follows: Verdana, 1 (8 pt), bold, and yellow color (#FFFF3C).

Select Restore after rollover. This will make the text to change back to its original state when the mouse pointer is not over the text.

Click OK after you have completed the settings. Repeat the above procedure to add rollover text effects to the other HTML text items on the left panel.

To test the rollover effect, select File: Preview in Browser - Internet Explorer.

NOTE: The same process in this step can also be applied in other script effects such as Blink Text, Highlight Text, and Rainbow Text.

Step Three: Create a Swap Image Effect

To begin, we first have to specify the area where the swap image will be displayed. Select the Slice Tool, then right-click on the windmill image at the bottom of the left panel and select Slice Around Object. This will create a rectangular slice around the image.

NOTE: The Swap Image area may not necessarily be the area where the original image is. You can also choose an empty cell to display the swap image.

We will apply the Swap Image effect to all the rollover text links on the left panel so when you mouse over them, you will see both Swap Image and Rollover Text effects.

Click the Historical Sites cell, then right-click and select Script Effects: Swap Image on the menu.