Preloading the Images

Since we will want the image transformation triggered by the rollover effect to be immediate, we’ll first want to create a behavior in Expression Web to preload both images on the web page when it is first opened. If we don’t do this, the effect could look choppy and amateurish as viewers would have to wait for the second image to load before the effect will be seen.

Step 1:

Create a DWT

Step 2:

Insert a new page File, New, Create From Dynamic Web Template

Step 3

Insert the initial image into the web page

Step 4

Make sure the Behaviors task pane is visible. If it’s not, you can toggle it on by opening the Task Panes menu on Expression Web’s main tool bar and selecting Behaviors.

Step 5

Click the Insert button in the Behaviors task pane and then select Preload Images.

Step 6

With the Preload Images dialog box now on your screen, click the Browse button and locate the image you wish to preload. After selecting the image source file, click the Add button to move the file to the collection of Preload Images.

Creating the Rollover or Swap Images Effect

Now that the images have been set to preload, we can insert the actual behavior that will trigger the rollover effect.

Step 1:

Select the image to which you want to apply the rollover effect.

Step 2:

Click the Insert button in the Behaviors task pane and select Swap Image.

Step 3:

In the Swap Images window shown now on your screen, click the Browse button and locate the image file that you want to swap to when the mouse hovers over the original image. This image has been preloaded from above (to avoid time delays...)

After selecting the image, you’ll see a line in the main area of the Swap Images box with the name of the original image file and swap image file.

By default, the box next to Restore on mouseout event remains unchecked. You want  the original image to reappear when the mouse moves away from the graphic, so put a check in this box.

Click OK when done.

Now, note the events that have been added to the list in the Behaviors task pane. There will be at least one for the initial swapping of the image. If you checked the box next to Restore on mouseout event, there will also be a second one listed for this action.

Checking the Rollover Effect

The rollover effect won’t be visible within Expression Web so if you want to verify your actions to make sure it is working correctly, first save the web page and then preview it in the browser using the Preview in Browser option located under File in Expression Web’s main toolbar.