Using Span Tags for Image Replacement

Certainly, one of the most popular image replacement methods that have been used in the last few years by web designers is the one conceived by Todd Fahrner. It makes use of a pair of extra <span> tags to hide the text wrapped by a web page element, thus cleanly displaying its background graphic.

To get a more intimate knowledge of how this method works, pay attention to the following CSS block. It shows how to apply the method to an H1 element by using the same "h1.png" background image shown in the preceding section:

h1 {

width: 400px;

height: 200px;

margin: 0;

padding: 0;

background: url(h1.png) top left no-repeat;

}

h1 span {

display: none;

}

In this case, the H1 header has been assigned the exact dimensions of its background image, a technique shared by Rundle's approach. However, this method uses an additional <span> selector to hide the text of the header from display via a "display: none" declaration, which implies that the markup of the web page must be properly modified so the style assigned to the pertinent <span> element can produce the desired effect.

By analyzing this initial CSS code fragment, it's easy to deduce two important things regarding the implementation of Fahrner's approach. First, it needs additional markup to do its thing properly, and last but not least, it possesses the same vulnerability as Rundle's method -- if the background image is not downloaded for any reason, the target element becomes inaccessible to users.

Nevertheless, I suggest for the moment that you keep your attention focused only on the driving logic of this approach. In the next section I'll be including the previous CSS snippet in a sample web document, so you'll be able to see how all of the pieces fit in together.

Now, jump forward and read the next few lines. We're almost finished here!