 |
 |
Click here to sign up for a FREE Refer-it Webmaster Account
Find a job or the right person
|
|
|
Splicing and Dicing Images
with Tables
By Peter Cooper
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.
This article first appeared in January, 2000.
Copyright © 1999-2000
internet.com Corp.All Rights Reserved. Legal Notices.
Contact the WebDeveloper.com® staff
Last modified: Thu Jun 15 06:11:28 EDT 2000
Refresh Daily
Join Editor-in-Chief David Fiedler
and find truth, justice, and a clue or two.
ActiveX / VBscript Animated GIF Archive Browsers CGI / Perl Database Connectivity Design / Graphics E-Commerce HTML-Advanced: DHTML, CSS HTML / Site Authoring Tools Intranet/Groupware Java JavaScript Multimedia: Audio / Video / Streaming Technologies Opinions Refresh Daily: Editorial Column Security Servers & Server Tools Site Design / Graphics Site Management / Marketing / Log File Analysis Tutorials VRML / 3D XML
