Have you ever wondered how to dynamically change the color of an image? For example, imagine having an online store that sells T-shirts of different colors. Being able to dynamically change the color of a T-shirt based on a user's selection would be handy in displaying your collection of available T-shirts. I'll show you how to accomplish this trick using DHTML and Internet Explorer 4+ by creating an image of a T-shirt that changes colors based on a user's selection. The user will be able to select a color from a palette and change the T-shirt to the selected color. This trick looks really impressive but it is fairly easy to achieve, though with some work up front.

It would be almost impossible to get the fold patterns of different shirts to line up if you photographed the shirts separately. When you clicked the shirt, you would be able to tell the difference, which ruins the illusion that you're changing the shirt color "magically." For this reason, you should take a photograph of one shirt, then open up a paint program like Photoshop and change the hue of the image to match the hue of the other shirts in your collection.

If your shirts have patterns on them, you should take photographs of each pattern, then use Photoshop's GIF conversion Export tool to make everything but the graphic in each image transparent. You should make these transparent GIFs the same dimensions as the T-shirt image. That way, when you overlay the transparent GIF on top of the T-shirt image, you can swap out either T-shirt or T-shirt graphic without having to know the position of one relative to the other. I have left it up to you to implement the graphic overlay. As a hint, you may want to create a DIV (with style.position="relative"), then add both the T-shirt image and the T-shirt graphic as images with style.position="absolute" and the .left and .top attributes set to 0.

Ultimately, you'll want to compare a string representation of the color ("Red", "Sky Blue","Yellow", and so forth), so you should determine what colors you'll need, and add the color name to the appropriate T-shirt image, such as TShirtRed.jpg, TShirtSky Blue.jpg, TShirtYellow.jpg, and so forth. Keep in mind that you'll need to add the color name for each different T-shirt that you want to present, so the names should be different (for example, TShirtNo8292_Red.jpg).

Once you have these shirt images prepared, performing the "magic" of switching colors is pretty simple. You divide the problem into two parts—selecting colors from some form of table or similar structure, then using the colors selected to load in the images that you need. The specific form changes from Netscape to Internet Explorer browsers. Using Internet Explorer as the platform, you could create a table that contains color swatches as background elements. For example, if you had T-shirts in nine different colors (for reference: white, red, maroon, sky blue, navy, green, yellow, violet, and black), then you could set up a table like this (click on it to see what happens):

The code for this selector takes advantage of the fact that if you set the mousedown event handler on a table, anything within that table will also receive the event. To determine whether you've clicked on a cell or on some border element within the table, retrieve the srcElement with window.event.srcElement and compare its tagName property to the cell tag ("TD").

This next step serves a critical purpose, and shows how easy it is to create multimedia effects with little to no work. Maintain a variable (in this case, selectedCell) that holds the previous cell clicked, or null if nothing was selected. Whenever a cell is clicked, the previous cell's border style is set from inset to outset, making it appear as if it were de-toggled. Then the new cell's border style is set back to inset, giving the illusion that it has been depressed. The code to accomplish this effect is astonishingly easy (about four lines worth), but it's one of the more powerful techniques for creating buttons. I personally prefer to not use the <BUTTON> tag. It is non-standard, it takes far more work to make it act like a toggle, and the component is noted for its flakiness in Internet Explorer 4.0.

The code for changing T-shirts is almost embarrassingly simple. Use the .src property for the image that you wish to change (in the example, the image has an id of "tshirtImage") and construct the URL of the T-shirt image in question. Next, place the name of the colors corresponding to the color names you assigned in the .title attribute of each cell. You use this value to determine the color. This technique is used as a rollover value when you mouse over the selector and as the URL constructor to determine which image to load from the left.

This code works exclusively with IE4 DHTML and above. The Netscape 4 version would require you to place onclick event calls within each cell (since it doesn't support the event cascading in the same way), but the principle is pretty much the same—when a live object is clicked, you retrieve the name of the color from the NAME or ID property, then set the image to the color using a naming convention. For earlier versions of the browser, you can follow the same technique, so long as the browser supports the ability to change images by altering their source attributes. The visual interactivity of depressing the color swatches would take a lot more effort (and would probably be best done with one graphic for each color swatch), but otherwise it uses most of the same techniques.

There are certainly ways to improve this color-changing trick. First of all, you can attempt to preload the T-shirt graphics, once the initial image is in place. Make sure you wait until the first image is loaded, or you'll have an image which takes way too long to finally load in its entirety. You should keep the file sizes of the images down to something manageable (8-10 KB or so, if possible), otherwise you'll end up with the refresh not appearing quickly. One technique that I've found works fairly effectively is to join all of the images into a single long strip of images, then create a DIV that's the size of just one of the images. You can then set the backgroundPositionX attribute to negative the width of one image times the cell position you want to display (as measured from zero). This technique is a little more complex, of course, since you also have to map the positions to color names yourself rather than letting the filenaming conventions do it, but it will give you better performance for large color selections. Now that you know the basics of how to dynamically change the color of an image, you can perform some color-changing magic of your own!

Kurt Cagle is the president of Cagle Communications, an Internet/intranet application developer specializing in client side and integrated client/server solutions. He is the author of three books on multimedia, Visual Basic and Internet programming and is currently working on a fourth on programming Internet Explorer 5.0. He can be reached at cagle@olywa.net.