In this seventh part of a series that explains image replacement techniques, I show you how to use the enhanced version of Todd Fahrner’s method. It uses two empty <span> elements to perform the image replacement process, thus efficiently addressing the problem that arises when the background image assigned to the targeted web page element isn’t downloaded properly by the browser.
Image Replacement with Empty Span Tags - Review: applying Fahrner's approach to hyperlinks (Page 2 of 4 )
As usual, before I show you the inner workings of Fahrner’s enhanced image replacement method, I'll give you quick look at this method's initial implementation. This approach was covered in detail in the previous part of the series.
In that tutorial, I used a simple example to demonstrate how to apply the method to the H1, H2 and <a> elements of a sample XHTML document, so below I reintroduced the source code corresponding to this example. Here it is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<title>Fahrner Image Replacement on H1, H2 elements and links</title>
<style type="text/css">
body {
padding: 0;
margin: 0;
background: #fff;
font: 1em Arial, Helvetica, sans-serif;
color: #000;
}
#wrapper {
width: 960px;
margin: 0 auto;
background: #ffc;
}
#header, #content, #footer {
padding: 20px;
}
/* apply image replacement on H1 element */
#header h1 {
width: 400px;
height: 200px;
margin: 0;
padding: 0;
background: url(h1.png) top left no-repeat;
}
#header h1 span {
display: none;
}
/* apply image replacement on H2 elements */
h2 {
width: 300px;
height: 150px;
margin: 0;
padding: 0;
background: url(h2.png) top left no-repeat;
}
h2 span {
display: none;
}
/* apply image replacement on links with this class */
.fancy_link {
display: block;
width: 200px;
height: 50px;
margin: 0;
padding: 0;
background: url(fancy_link.png) top left no-repeat;
}
.fancy_link span {
display: none;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1><span>Welcome to our website</span></h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet. Quisque rhoncus sodales sapien ac blandit. Nam lacus urna, commodo eget tincidunt vitae, ullamcorper at nulla. Vivamus ac iaculis justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Sed quis elit erat, et ultricies diam. Phasellus non turpis malesuada erat ultrices tincidunt sed vitae magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis purus risus, lacinia at faucibus id, luctus nec diam. In nulla neque, consequat ac hendrerit ac, pulvinar eu dui. Aenean in arcu felis, non hendrerit est.</p>
<a href="#" class="fancy_link"><span>Read more on this topic...</span></a>
</div>
<div id="content">
<h2><span>Main content section</span></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet. Quisque rhoncus sodales sapien ac blandit. Nam lacus urna, commodo eget tincidunt vitae, ullamcorper at nulla. Vivamus ac iaculis justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Sed quis elit erat, et ultricies diam. Phasellus non turpis malesuada erat ultrices tincidunt sed vitae magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis purus risus, lacinia at faucibus id, luctus nec diam. In nulla neque, consequat ac hendrerit ac, pulvinar eu dui. Aenean in arcu felis, non hendrerit est.</p>
<a href="#" class="fancy_link"><span>Read more on this topic...</span></a>
</div>
<div id="footer">
<h2><span>Footer section</span></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet. Quisque rhoncus sodales sapien ac blandit. Nam lacus urna, commodo eget tincidunt vitae, ullamcorper at nulla. Vivamus ac iaculis justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Sed quis elit erat, et ultricies diam. Phasellus non turpis malesuada erat ultrices tincidunt sed vitae magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis purus risus, lacinia at faucibus id, luctus nec diam. In nulla neque, consequat ac hendrerit ac, pulvinar eu dui. Aenean in arcu felis, non hendrerit est.</p>
<a href="#" class="fancy_link"><span>Read more on this topic...</span></a>
</div>
</div>
</body>
</html>
As you can see, polishing the visual appearance of the aforementioned web page elements by using Fahrner’s method is indeed a no-brainer process limited to hiding the elements’ inner text via a couple of <span> tags and nothing else. However, as I expressed in the introduction, the method not only requires you to code additional markup to work as expected, but it doesn’t solve the accessibility issue that arises when the corresponding background images aren’t displayed on screen.
In summary, does this mean that this method should be discarded in favor of better options? Well, not so fast; over the last few years an enhanced version of it has been created that fixes the previous issue in a pretty clever way, even at the expense of still using a pair of <span> tags.
Thus, in the following section I’ll be showing you how to implement the improved Fahrner’s approach, so you can quickly learn its driving logic.
Now, click on the link below and read the lines to come.
Style Sheets 
HTML5 Boilerplate Introduction
