Assigning Negative Indentation to Hyperlinks for Image Replacement

Commonly known by web designers by its acronym IR, Image Replacement is a group of approaches that in most cases relies on the functionality of style sheets to hide the inner text of an element on an HTML page, while its assigned background image remains visible. While at first sight, the role that IR plays currently in the terrain of modern web design seems to be somewhat irrelevant, reality tells us something radically different.

Actually, image replacement is extremely useful for decorating text-based web page elements with eye-catching images, without the need to alter (at least at a significant level) its structural markup. While many purists consider some IR approaches to be raw CSS hacks that aren’t worth looking at, the truth is that there’s a decent variety of IR techniques used nowadays that do deserve an in-depth analysis.

In consonance with this idea, in the two articles that preceded this one I demonstrated how to use the IR approach developed originally by Mike Rundle to add some fancy styles to both H1 and H2 headers of a web document. This approach bases its functionality on assigning a large negative value to the “text-indent” CSS property of the target element, in this way hiding its text from view, while revealing its background image. It’s that simple, really.

However, the previous technique is flexible enough to be applied easily to other text-based elements, including hyperlinks. Thus, in the course of this third installment of the series, I’ll be showing how to use Mike Rundle’s IR technique with some web page links.

Now, it’s time to get rid of the preliminaries and continue to explore the real power behind using CSS-based image replacement. Let’s go!