ART 346 Z: Interactive Design

Rollovers and Swap Images

Wednesday, September 06, 2006

Adding behaviors to a webpage is good way to give visual feedback to the navigational elements. For instance, a hotspot doesn't give much feedback to the user that there is something to click.

A rollover however can provide important cues as to how the site functions. A rollover functions by replacing one image with another when your cursor rolls over it.

A swap image behavior is used to create a disjointed rollover -- moving your cursor over the trigger area displays an image elsewhere on the page.

Difference between hotspots, rollovers and swaps

Some examples of swaps and rollovers:

PetSmart

Brian Williamsom

J. Crew


Examples to recreate in class:

Four Rollovers

Christie   /   0 comments