Make Your Web Pages "Behave" by Swapping Images

I used Expression Design to layout and create the elements for my wedding homepage (see my blog Composing a Wedding Page in Expression Design) and then used Expression Web to position them on the page. In this post I will describe how to use Expression Web to add image swapping behavior to the page.

Each of the image tags on the page is given appropriate alternate text and is also given meaningful IDs where I will give them behaviors. In order to make the page more interesting and more interactive I decided that the look of each link to a gallery and also the central image will change when the user moves their mouse over the link. I did this to give the use some feedback so that they would notice that the titles are, in fact, links to other content.

Previously in Expression Design, I created the alternate title images that will replace the normal ones for the Image Swap behaviors. I also prepared four more cropped images from the wedding that will replace the black and white one used in the original composition.

Swapping those images out really makes the interaction with the page “pop” by injecting color on an otherwise monochrome image.

Selecting one of the images from the page  (like in the picture above) and opening the Behaviors task pane via the Task Panes menu allows you to define a number of different kinds of behaviors for that image or element. Press the “Insert” button and select “Swap Image” from the menu.

You will then be presented with the Swap Image dialog box which you can use to change the images on a page when the use moves their mouse over the image you currently have selected. In the example below, the settings for this image will swap out the existing image (ID is “WeddingTitleImage”) with the “light” version of that image and also change the page’s main image (ID is “MainImage”) with the color version of that image. There are also two other options, Preload Images will download the images using JavaScript immediately when the page is initially loaded (for smooth animation) and Restore on mouseoutevent will automatically restore the image when the user moves their mouse out of the selected image.

I found this to be a very easy way to get this functionality, since I have wasted lots of time writing and debugging my own JavaScript in the past. Once I have configured the Swap Image settings for the other three title image, the page’s functionality is complete.

I tested this page in Internet Explorer 6, 7 and 8 Beta, Firefox, Opera, Safari for Windows and the new Google Chrome Beta. The CSS layout and the JavaScript code to swap the images performed perfectly in every case.

I'm still working on it but you can view the work in progress here: wedding website. I'll keep blogging about my progress as I continue to use Expression Studio programs to add to the site more and more. Next I will explore using Expression Media to create the actual image galleries.

Comments

• Anonymous
  September 29, 2008
  I used Expression Design to layout and create the elements for my wedding homepage (see my blog Composing

• Anonymous
  September 29, 2008
  I used Expression Design to layout and create the elements for my wedding homepage (see my blog Composing

• Anonymous
  November 05, 2008
  Like your page! Swapping Images:  my case: the two images have differend sizes I would like to show a larger size of an image that replace the smal version of that same picture on mouseOver. On mouseOut the smal version should appear back. Like Swap Images and Swap Images Restore except both are the same picture. Kind of zooming on mouseOver. hp from Germany, near Cologne near Bonn