Grouping Images: Step by Step Instructions

How did you do that?

STEP 1

Let's start at the beginning.

We have five images that are each 300 x 225.

We made a thumbnail for each image sized to 75 x 56. A standard thumbnail will work, but for effect we cut a small 75 x 56 section from our image. We want more of a collage look.

The images and the thumbnails are named:

  IMAGE             THUMBNAIL 
  image1.jpg       thumb1a.jpg
  image2.jpg       thumb2a.jpg 
  image3.jpg       thumb3a.jpg
  image4.jpg       thumb4a.jpg
  image5.jpg       thumb5a.jpg 
	

Hint: If you are following along you might want to name your images the same as this example. We put our images in a directory named IMAGES.

Group using the IMG tag

STEP 2

Now group the five thumbnails using only the IMG tag.

Here is the HTML.

	
<img src="images/thumb1a.jpg" width="75" height="56">
<img src="images/thumb2a.jpg" width="75" height="56">
<img src="images/thumb3a.jpg" width="75" height="56">
<BR> 
<img src="images/thumb4a.jpg" width="75" height="56">
<img src="images/thumb5a.jpg" width="75" height="56">
<img src="images/thumb1a.jpg" width="75" height="56">

Collage the Images

STEP 3

To remove the white space between the images we added TABLE tags to create a small table to hold our images.

The thumbnail images are not Clickable yet. We have a two-row table to hold the thumbnail images. Cellpadding and cellspacing are set to zero to remove the whitespace.

Make the thumbnail images Clickable

STEP 4

Now we are going to add one line of code before each IMG image tag. This code hyperlinks the thumbnail image. When the thumbnail thumb1a.jpg is clicked a new window we named myWindow will open and display the picture named image1.jpg

Yes, it really is just one line of code.

But, it happens to be one very long line. The code is wrapped in the display. When you copy and paste the code into your page remember to change the name of your images and don't add a line break.

Grouping Images: Final Copy and Paste Code

Go to Extras      Back to Top

Grouping Images: Extras

Now that we have our table to group our images and make them clickable let's repeat it a couple of times and use an outside table of a width of about 400 pixels, with a background image from our table, image3.jpg.

Since we are repeating images we have already used (and cached) we don't have to load them again. Each image we reuse is cheap, or nearly free, as far as load time goes. Consequently, this page should load very fast.