Creating Rollover Images in Expression Web

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: Open the web page in Expression Web to which you want to add the images and the rollover effect.

Step 2: Insert the initial image into the web page. For more details on how to do this, see the guide Microsoft Expression Web: Create Custom Buttons for Hyperlinks.

Step 3: 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 4: Click the Insert button in the Behaviors task pane and then select Preload Images.

Step 5: With the Preload Images dialog box now on your screen, click the Browse button and locate each 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.

Step 6: Repeat Step 5 for each image you wish to preload. When finished, click OK to return the main Expression Web interface.

Note that the Preload Images behavior will now be shown in the Events list in the Behaviors task pane as seen in the screenshot below.

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

Step 1: In Expression Web, 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.

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. If you want the original image to reappear when the mouse moves away from the graphic, 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 of your choice using the Preview in Browser option located under File in Expression Web’s main toolbar.

If you find that you do need to make modifications to the behavior, go back to Expression Web and select the original image again. After doing this, you’ll be able to see the events listed in the Behaviors task pane. Double-click on the Swap Images action and that window will open again, allowing you to make changes.

If you're looking for more Expression Web tutorials, take a moment and browse through the collection found here at Bright Hub. Our ever-growing library includes topics such as new web site creation, how to import Excel data into an Expression Web table, how to change hyperlink colors, and more.