Today, it's commonplace to sandwich pieces of a graphic between HREF anchor tags and then assemble them together seamlessly with HTML tables. The advantages of this approach reach beyond sidestepping complicated map files. Tiling images with HTML tables allows you to isolate sections of an image for integrating more sophisticated elements such as GIF animations, JavaScript mouseover events, Java applets, and Shockwave movies. The trick to tiling images lies in careful preparation and precise implementation.

Tiling images with HTML tables is essentially a two-step process aside from creating the graphics, animations and other images. First, you need to slice up the graphic into its pieces, and then assemble them with HTML. We will discuss the issues inherent in this first step, and then we'll discuss the HTML issues in Part 2.

Figure 1: This interface has been puzzled together with HTML tables so that the GIF animations and JavaScript mouseover events could be integrated seamlessly with the rest of the image.

Let's begin by cutting up a perfectly good graphic into a series of precisely sized pieces. Create or compile the images in a comprehensive bitmap editing program such as Adobe Photoshop. The object is to avoid unsightly gaps when the image is ultimately displayed, so features such as bitmap layering and accurate guide placement are critical for puzzling together graphics on a Web page.

Figure 1 features an elaborate interface of four separate screens displaying animations and still images associated with JavaScript rollover events. A text screen also displays the name of the site's sections. When the interface first loads, visitors see the same animation playing in all four screens. When the visitor rolls over the little buttons two things happen: 1) still images appear in the screen that corresponds to the button and 2) the name of the site's section appears on the text screen. Note that the animation/image screens are not in alignment and that the buttons are in semi-random positions. You can visit my site at Eyeland.com to see how this interface works.

Layering in Photoshop
Photoshop's layers are important because the interface will be seen in various states. For example, when the user rolls over the button corresponding to the "Funzone" section of the site, the button looks depressed, a still image shows up in a screen corresponding to the Funzone button, and the text "Funzone" appears in the center display area. All of these states can be created or compiled on separate layers in Photoshop, as shown in Figure 2. Layers can easily become numerous, so it helps to give the layers descriptive names that you can remember and refer to easily.

Figure 2: Using Photoshop's layers to create the imagery provides a great deal of flexibility for creating multiple instances of an image.	Dissecting the Image When it comes to sectioning off individual pieces of the graphic, precise selections are very important because the image won't look right in the browser if each piece of the graphic isn't the exact size. Photoshop's guides (with Snap-to Guides on) and Info box may help make this requirement easy to manage. However, it is simple to create imprecise guides with Photoshop 4. Figure 3 illustrates what can happen when the guides are not precisely aligned. What's happening here is that Photoshop's selections snap to the nearest pixel borders regardless of where the guidelines are positioned. Since guides can be positioned anywhere, they will more often than not be over the top of a pixel rather than over the pixel boundaries. The result is inaccurate selections. (Pieces of the image might be a single pixel too wide, high, thin, etc., due to the imprecise selections used to create them.)
Figure 3: Photoshop's selections snap to the nearest pixel boundary, which can result in imprecisely-sized pieces of your image. Figure 4: Guides can become numerous when there are as many uneven pieces of the image to isolate. If even one guide isn't precisely positioned, the whole image might be thrown off when it is reassembed with HTML tables.	To precisely position guides over pixel boundaries, open Photoshop's Guides and Grids Preferences dialog box (File, Preferences). Change the grid to Gridline every 1 pixel with a 1 pixel Subdivision. Now, when you turn on the Snap-to Grid option, your guides will snap-to pixel boundaries. Figure 4 shows all of the guides that were used for the example interface. The guides are numerous because they are being used to isolate each variable portion of the image from those portions of the image that will always remain stagnant. For example, each screen is isolated from the monitor imagery that surrounds it since the content of the screen will depend on whether a visitor has his mouse over a button or not. It is also important to assign your IMG tags the accurate measurements for the HEIGHT and WIDTH attributes. You can access this information when you make each selection. Open the Info palette and find the height and width of each selection displayed in the lower right quadrant of the Info palette as shown in Figure 5 (ensure that units are set to pixels). Make a note of this information to use later when you write the HTML IMG tags for each piece.
Figure 5: You can get the Height and Width information from the Info palette as you make each piece.	When it comes time to export the pieces of the images for each state, you only need to turn on the layers for each given state and/or turn off the layers for all other states. Here's the basic process: 1) Using the guides, make a selection of a portion of the graphic. In this image, the pieces of the image serve to isolate the screens, the text screen, and the buttons. Figure 6 shows a rectangular piece to the left of the text screen.
Figure 6: Make a selection. Note that all selections must be rectangular or square.	2) Once you've made your selection, ensure that one of the visible layers is selected in the Layers palette and choose Copy Merged from the Edit menu. This feature allows you to avoid merging the layers together by making a copy of the contents within the selection of all of the visible layers (see Figure 7).
Figure 7: Rather than merging layers, use the Copy Merged feature to copy each piece of the graphic into a new document.	3) Create a new document by selecting New from the File menu. Notice that the size defaults to the size of the image in the clipboard (see Figure 8). Rename the document to uniquely distinguish it from the other pieces, click OK in the New dialog, paste the piece into the new document, merge it to the background, and export it as a GIF or JPEG image.
Figure 8: Photoshop's New document dialog defaults to the size of the image in the clipboard. Figure 9: Paste the contents and be sure to merge it to the background. Figure 10: Unsightly seams can result when GIFs are puzzled together with JPEGs.	The choice of GIF versus JPEG is typically determined by which format yields the smallest file size while maintaining an acceptable degree of visual integrity. However, images that are puzzled together must look like they are all part of the same image. If you use a GIF for one piece and a JPEG for another, there can be a noticeable border between the two images. In Figure 10, a GIF animation of rotating gears has been tabled together with JPEG images. You can easily see the borders between the GIF and JPEG animations. In a situation like this, you often still want to use JPEG because of the file size advantages, but you don't want an unsightly seam. To avoid having a seam, convert the pieces to GIF and then convert back to RGB, then export them as JPEGs -- they will match the GIF images now. Incidentally, integrating GIF animations is not the only instance when you might need to match a JPEG to a GIF. Since JPEG doesn't have support for transparency, you might also want to use GIF to make portions of the overall tabled graphic transparent. Once you have all of your images, it's time to assemble them in HTML. We will look at the various issues involved in tabling graphics together seamlessly with HTML in the next installment: Tiling Images in Tables: Creating precisely aligned images with HTML.