In a previous tutorial, we looked at placing images in the background
of a table. In this tutorial we are going to look at placing images
inside the table. There are a number of things you can do with an
image and a table. Probably everyone by now knows that you can use
the table to create a very quick and simple 3D frame around a picture by
simply creating a single cell table and a thick border. In case you
are unaware of this, here is an example:
There are, of course, some other reasons for placing images into a table.
For example, assume you want to do something catchy like acknowledge when
the user places the cursor over the image by changing the puppy's eye color.
One way of doing this is to simply have a duplicate image with red eyes.
With some simple JavaScript, the images could be swapped when the cursor
moves over the image. The purpose of this tutorial is not to focus
on the JavaScript, however, if you interested, simply view the HTML source
and look at the swapFullImage routine. Here is the implementation:
Note, the link actually doesn't work. It was used to get at the mouse
events for the image. If you think about it, this is an incredible
inefficient way to obtain this effect. By this, I mean that you are
wasting disk space. All you are doing is changing a small portion
of the image, yet you are swapping in a full copy. One way of doing
this is to span the image over table cells. This will allow us to
swap in a smaller image. The first step is to break the image up
into smaller pieces. There is a good freeware tool called Dicer which
makes this task very easy. For this example, we are simply going
to break up image using our favorite graphical editor. The trick
is to divide the image up into squares and to isolate the area that will
be changing into the smallest single division possible. This is the
solution we came up for dividing the image in our example:
As you can see, you can actually see how it fits into the table model.
At first glance it looks like we need a 9 cell table. On close examination,
all you really need is 5 cells. The top and bottom image can span
the three cells allowing us to use a larger portion of the image in those
areas. Now, we only have to alter the middle image which contains
the eyes. Here are all of the pieces of the starting image:
Yikes, we seem to have created a monster! No, actually we need to
manipulate the inner table to align our image. The first step is
to remove the inner borders. This results in this:
That helped a little, but we still have white spaces between the images
parts. This is a result of cellpadding and cellspacing. To remove it, simply
set cellpadding=0 and cellspacing=0 in the inner table tag. This results in the following
seamless image:
Now all we have to do is take the inner image: and
perform or color modification on it: . Now we only
need to swap out the inner image instead of the whole copy. Since the original image has been
broken into several smaller ones, you will need to add the href links to each of those smaller images.
Here is the final results:
We have now accomplished the same effect as when we swapped in the whole image. Let's look at the difference. The first example used
two images one 33K and the other 32K for a total of 65K. The new method used 6 images;
8K, 2K, 2K, 2K, 22K, 2K for a total of 38K or a little over half. Not only does this save disk space, but it also reduces download time
for the user. Depending on how creative you get, you can end up saving a lot of space if you're site implements a number of image
replacements.
See you next tutorial, till then, watch your step, the dog's been out
and
perform or color modification on it: 
. Now we only
need to swap out the inner image instead of the whole copy. Since the original image has been
broken into several smaller ones, you will need to add the href links to each of those smaller images.
Here is the final results:
