Web Design Tutorial

Prerequisites: Familiarity with the a and img tags, as well as HTML tables and the tags they require.

Objective: To create an interactive image that works with all browsers. Although there are several methods for doing this, composite images are a reliable way to accomplish this. Composite images also load a lot faster than the alternatives.

STEP 1: Creating and preparing the image
Create the image as it will appear in its final form (Master Image).

Because the final product will be a composite, make a copy of the image in order to map out each segment in a grid structure. This structure is then translated to an HTML table. Each segment in the grid will reside in its own table cell and contain one segment of the complete image.

The structure of the cutting pattern itself is determined by the master image and how it will be incorporated. In the case of the image used in this tutorial, it is a document masthead with navigation elements. The logical split is a five column structure in which active and static compnents can be isolated.

Because elements within a cell may require further division, secondary tables should be used instead of a more complex table, as that can become difficult to maintain. In this example, the navigation elements get isolated in the same manner as before, leading to this result:

STEP 2: Preparing the HTML Code
With the cutting guide generated, the image can be cut into its respective components. Once the elements are cut, the table itself can be built and sized based on the dimensions of those elements.

When building the table(s), create them with the following attribute settings: border="1", cellpadding="0", and cellspacing="0". While HTML syntax rules specifies that a width be declared for table, doing so can lead to rendering problems. Therefore, this attribute must be left out.

Here is a generic example of this:

The resulting boilerplate remains consistent throughout the composite. Widths are only declared within td tags when inserting the corresponding graphical element and must be identical to the width of the image. Height declarations are optional, but should also be identical to that of the image.

Because of differences in how different browser engines render pages, it is essential that the td closure tag immediately follow the img tag. If the closure is on a new line, certain browsers may inject a small gap in the cell, disrupting the seamless appearance. Likewise, when an image segment doubles as a navigation object, the img tag must nest inside the a tag on the same code line. Otherwise, the seamless appearance of the composite may be disrupted.

Please note: HTML editors that beautify code may shift the closing tag to the next line. If this happens, it will be necessary to manually re-join the two tags.

With all of this in mind, the completed generic code looks like this:

STEP 3: Putting it Together
Applying the practices outlined in the previous step, coding for the composite can start, working from the inside out.

The masthead composite shown in Step 1 calls for a five column, single row table. One of the cells will contain a single column secondary table with three rows. This secondary table gets created first. Once the table is created, one graphical element gets placed in each row. The end result should look as follows:

With the secondary table complete, the same process is applied to creating the primary table. The table for the example used by this tutorial will consist of one row divided into five columns, with the fourth column housing the inner table. As before, each cell width is set to the width of the object it contains.

Once the table is populated, provided there are no visible gaps around any of the image elements, set border to zero on both tables. The end result will be a seamless image: