WebDeveloper.com �: Where Web Developers and Designers Learn How to Build Web Sites, Program in Java and JavaScript, and More!   
Web Developer Resource Directory WebDev Jobs
Animated GIFs
CSS
CSS Properties
Database
Design
Flash
HTML
HTML 4.01 Tags
JavaScript
.NET
PHP
Reference
Security
Site Management
Video
XML/RSS
WD Forums
 Client-Side
  Development

    HTML
    XML
    CSS
    Graphics
    JavaScript
    ASP
    Multimedia
    Web Video
    Accessibility
    Dreamweaver
    General
    Accessibility
    Dreamweaver
    Expression Web

    General

 Server-Side
  Development

    PHP
    Perl
    .NET
    Forum, Blog, Wiki & CMS
    SQL
    Java
    Others

 Site Management
    Domain Names
    Search Engines
    Website Reviews

 Web Development
  Business Issues

    Business Matters

 Etc.
    The Coffee Lounge
    Computer Issues
    Feedback




Splicing and Dicing Images with Tables

by Peter Cooper
First published: January, 2000

Splitting up a big image can get it loaded faster. Here's how to do it!

You will often see sites that use a large graphic as a navigational aid, but don't use an image map. How do they do it? Well, put simply, they cut the original image into many pieces, then reconstruct it again on the page, applying links to the relevant parts.

"Great!" I hear you cry, "But how is this done?". Well, as we're continuing on our tables theme for a while, what else could it be but tables?

Splicing the Image

The first step in reconstructing a large image using tables is to actually separate the initial image! Let's use the following example:

To use this simple image to work as three independent buttons, we need to splice the image into 3 parts, then reconstruct them within a table. The method is different depending on which graphics program you use, but since Photoshop is now a defined standard, we'll quickly run through the method using it.

First, have your graphic ready in Photoshop, as I have. Then, make sure rulers are on. If you're not sure then press CTRL and R (Mac: Option+R) until they're around your image as in the picture below. Then click on the ruler and drag towards the image. You'll notice you're dragging a dashed line, this is called a guide and we'll be using guides to splice the image. Line up the guide with the boundaries of the first button and let go of the mouse button. The guide should turn into a solid blue line. This line isn't actually part of your image, but merely works as a guide, hence the name.

Continue to lay guides for the other buttons. Indeed, you'll only need two on this demonstration image, as you can see below.

Now you need to use the marquee tool to make a selection down to the first guide, as seen in the demonstration below. If you can't find the marquee tool, then just press 'M' to enable it. Then click and drag the selection down to the first guide. You will notice the selection 'locking' to the guide.

You don't really have to use tables for this, but you'll eventually be sorry if you don't!

Now press CTRL and C to copy the selection into memory, then start a new document by pressing CTRL and N. Say okay to the new document, then press CTRL and V to paste the selection into the new document. The new document should look something like the image below:

You can now return to the main document and cut out the second and third sections, until you have three separate documents containing the separate sections. You will then need to export or save your files as either GIF or JPEG files, depending on the circumstances. Eventually, you should end up with three (or more, depending on what you're doing) files. Let's call them 1.gif, 2.gif and 3.gif, in this example.

Here are all three files, going across the screen in order.

Joining the Parts

Now we come to the tables. However, you don't have to use tables, they merely provide a more stable and acceptable way of doing things. You could simply place the graphics on the page like so:

<img src="1.gif"><br>
<img src="2.gif"><br>
<img src="3.gif"><br>

However, when you come to putting together large collections of images, this method can become messy and hard to manage. So, even for our simple collection of 3 images, we'll continue to use tables.

The first thing we need to do is define a table which has three rows. Once again this isn't a necessity, you could place all three images within one row, but when you come to making large collages of images, this can be impractical. So, we have code as follows:

<table border=0 cellpadding=0 cellspacing=0>
<tr>
<td>
<img src="1.gif"><br>
</td>
</tr>
<tr>
<td>
<img src="2.gif"><br>
</td>
</tr>
<tr>
<td>
<img src="3.gif"><br>
</td>
</tr>
</table>

Notice how we specify the padding and spacing as 0 pixels. If you wanted a defined space between the images then you could use these figures (as covered in part 1 of our table series) to set borders. In this case, however, we want to keep the images joined together.

However, there's something we've missed. We wanted the pictures to be links to other pages. "Easy!" you say, "Just put <A> anchor tags around the images!"

That's only half of the solution. If you merely defined the pictures as links using the anchor tag, you'd end up with your images having a colored line around them. This is because images have a border by default when they become links. We need to fix this by using a BORDER=0 setting with each image. This makes our code look like this:

<table border=0 cellpadding=0 cellspacing=0>
<tr>
<td>
<a href="1.htm"><img src="1.gif" border=0></a><br>
</td>
</tr>
<tr>
<td>
<a href="2.htm"><img src="2.gif" border=0></a><br>
</td>
</tr>
<tr>
<td>
<a href="3.htm"><img src="3.gif" border=0></a><br>
</td>
</tr>
</table>

Hurrah! We've finally reached upon a solution to our one-dimensional splicing and dicing problem. You can now dissect an image in one dimension using Photoshop, and reconstruct it using a simple table. However, there are instances when you want to dissect an image in two dimensions, and tables become far more important in that situation.




HTML5 Development Center


Recent Articles