Aside from the proper code, you need at least two versions of each image you want to change— one that's present when the page is first viewed, and another for when the cursor is rolled over the image or link—and both of those versions should be the same size. In addition to those two states, you might have another version of the image for when the user actually clicks it, and yet another for images whose links have already been clicked (in other words, visited links).
I think any designer who's worked on a large web site with personalized graphics has at some time wished for her own robot to perform the more mundane, repetitive aspects of the job related to that personalization. For example, suppose you are a web designer for a large newspaper. Your tasks include reformatting existing graphics from the printed version of the paper for the online version. Among other things, you are required to adjust the color mode, size, resolution, file format, copyright, and photographer name. Doing these things for a daily newspaper could become a full-time job in itself.
Instead, you can create a template for an image, such as the photo accompanying the lead story of the newspaper, and specify which aspects of the image may change according to the actual photograph being used. (These changeable aspects are called variables.) In addition, you identify the different sets of data (such as the photographs and photographer's name) associated with each variable, and you're off and running.
After you finish the template, you can then output the individual graphics using Adobe AlterCast, or by writing a script to process the output. AlterCast is a product that resides on the web server and is capable of creating images on the fly, based on a user's interaction with the web site and/or the variables you specify. (For more information about AlterCast, see www.adobe.com/products/ altercast.)
Was this article helpful?