Using Span Tags for Image Replacement

In the last few years, different image replacement approaches have become popular in response to web designers' need to embed appealing background graphics into different web page elements -- without messing up the structural markup with tags that have no actual semantic meaning.

True to form, most of these approaches rely on the functionality of CSS to achieve the replacement process, although it's also fair to say that there exist some other methods that make use of Flash and JavaScript to produce similar results. This group of articles explores only the ones that utilize style sheets, as they offer a flatter learning curve and fewer accessibility issues.

Of course, if you've already read the tutorials that precede this one, then you have a clear idea of how to use the image replacement method created by Mike Rundle. In those tutorials I explained how to add some fancy background images to H1, H2 and <a> elements of a basic web page, without changing a single piece of the page's markup.

In simple terms, this method does its "magic" simply by assigning a huge negative value to the "text-indent" property of the element being styled, a process that hides its inner text, while revealing the corresponding background image.

As you may have guessed, though, apart from Mike Rundle's, there are a few other IR approaches that I plan to cover in this and subsequent installments of the series. With that goal in mind, in the lines to come I'll be explaining how to implement the method developed by Todd Fahrner, which uses a couple of <span> tags to hide the text wrapped by a given HTML element.

Now, let's leave the theory behind and start exploring the inner workings of Fahrner's image replacement method. Let's jump in!