How to Create Swap and Rollover Image Effects in Microsoft Expression Web

How to Create Swap and Rollover Image Effects in Microsoft Expression Web
Page content

Image Transformations in Expression Web

One common effect seen in web pages today is an image transformation that is triggered by hovering the mouse pointer over a particular graphic on the page. This swapping effect can be used for a variety of purposes including changing the color of a button or banner when the mouse pointer is rolled over the original object. The technique can also be applied so that any image on the web page seems to transform into another.

In this tutorial, we’ll take a look at a simple, but common example. Even though the graphics we’ll be working with are pretty standard, the same technique can be used for any two images whether they are clip-art, buttons, illustrations, or photos. For our example, we’ll use the two web buttons depicted below where the only difference between the two objects is the color of the text. We’ll go through all the steps needed to create an effect where rolling the mouse over the first button transforms the image into the second button. (Click any image for a larger view.)


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: 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.

Toggle Behavior Task Pane

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

Insert Behavior

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.

Preload Images Dialog Box

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.

Preload Images in Events List

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: In Expression Web, select the image to which you want to apply the rollover effect.

Select Image

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

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.

Swap Images Behavior

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.

Swap Behavior Events

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.