Using Span Tags for Image Replacement
(Page 1 of 4 )
In this fourth part of a six-part series on image replacement, I explore a CSS-based image replacement method originally created by Todd Fahrner. It bases its functionality on using a couple of extra <span> tags to hide the text wrapped by a targeted web page element, while keeping its background image visible.
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!
Next: Review: Mike Rundle's image replacement method >>
More Style Sheets Articles
More By Alejandro Gervasio
/ 3 
