We've spent a long time investigating almost every aspect of images within HTML. Let's close the series with a demonstration of how important a single pixel can be.
The Single Pixel Miracle
Every webmaster needs a single pixel in his or her bag of tricks. Used correctly, this pixel can make your web authoring life much easier.
To save you all the hard work, I'll be a sport and give you a pixel:
. You can't see it, of course, but right-click in the blank space to save this pixel to your machine.
This pixel is actually a single-pixel GIF89a image with the single pixel set to be transparent. This means that anything that appears behind this pixel, like a background image or color, will show through. As a diagnostic tool, the single pixel in the image is actually bright green. If you use this image and you get a green spot in your document, something is broken in either the image or your browser.
Of course, a single pixel doesn't cover much space in your document. Luckily, we can use the height and width attributes to stretch the pixel to any size we need. Thus enlarged, that single pixel becomes one of the most useful layout tools you'll ever have in your web toolbox.
Need to indent a paragraph by exactly 36 pixels? Just place
<img src=1p-trans.gif height="1" width="36">
in front of the paragraph, and you'll get the right indent every time. Don't believe me? Check out the line before the example code, where I did just that.
Need to create a block of white space, perhaps with some text flowed around it? No problem. Stretch your pixel to the desired size, add the align attribute of your choice, and away you go. This paragraph, for example, has a 25x50 block of white space to its left.
This pixel also comes in handy when you need to create empty table cells of a certain size. Stretch the pixel to the desired shape and place in a cell. The cell will shrink to fit the image and reserve the space you wanted.
The other nice thing about the single pixel image is that it is small (only 43 bytes) and can be used over and over in a single document, being pulled from the browser's document cache each time.
Custom Rules and Blocks
When you tire of using a transparent single pixel, branch out and tinker with a single colored pixel. Again, I'll save you all the time and trouble by giving you a single black pixel to get you started: 
. You can use any common image editor to adjust the color as needed.
A single colored pixel is the perfect tool for creating custom rules and blocks of color in your documents. While the <hr> tag is great at creating horizontal rules of varying width and constant height, a single pixel can be stretched to create a rule line of any height and width. The downside, of course, is that your single-pixel rules will not have fancy 3D edge effects.
Even so, you can create special paragraph delimiters, like the one surrounding this paragraph, by stretching and aligning that one pixel like this:
<center><img src=1p-black.gif width="100" height="25"></center>
| You can create bar-like vertical rules at one side of a paragraph by combining tables and your single pixel image. This paragraph should have a five-pixel rule to its right that changes size as the height of the paragraph changes. Go ahead, adjust your browser's width and watch the magic. How'd I do it? Take a shot on your own, and then View Source with your browser for the answer. |
Once you get on a roll with a single pixel, you'll find all sorts of handy uses for this tiny tool. Take a week to experiment and write me with your best tricks. When we return next week, we'll begin a new series on frames.
Previously in Tag of the Week:
Background Images in Tables
Don't Try This At Home
Image Map Basics, Part 2: Client-Side
