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