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