Step One: Create Two Images

As with regular button rollovers, you use two images to show the "off" and "on" states of the graphic. However, because we are using image maps instead of separate graphics, you'll only need a total of two images versus two for every button. In our example, there are three buttons "carved" from one graphic, but there very easily could have been eight or a dozen separate buttons which would have required 16 or 24 separate images -- again, as opposed to our two.

After building your first image, bring it into your favorite image processing program and make the alterations necessary to create your second image. All I did to make my "on" image was to add a glow effect to each of the three hotspots.

Tip
One of the methods used in this technique involves clipping a region of an image. Presently, layers only support rectangular clipping. Keep this in mind as you build your primary image and avoid placing your hotspots too close together.

 



Next -->

Step One: Create Two Images

Step Two: Set up the Layers

Step Three: Attach the Behavior

Step Four: Make the Image Maps

Step Five: Complete the Code