Using Fahrner`s Improved Image Replacement Method with Hyperlinks
In this ninth part of the series, I show how to implement the improved version of Fahrner’s image replacement method for polishing the visual presentation of some <a> elements. The whole styling process is very straightforward, so you should easily be able to apply it when creating your own web pages.
Using Fahrner`s Improved Image Replacement Method with Hyperlinks - Completing the example with a web page (Page 4 of 4 )
As I anticipated in the preceding segment, below I created an example XHTML page that includes the previous CSS snippet, thus styling all of the <a> elements included in it:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<title>Variation of Fahrner Image Replacement (FIR) 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 {
position: relative;
width: 400px;
height: 200px;
margin: 0;
padding: 0;
overflow: hidden;
}
#header h1 span {
display: block;
position: absolute;
left: 0;
top: 0;
z-index: 1;
width: 400px;
height: 200px;
margin: 0;
padding:0;
background: url(h1.gif) top left no-repeat;
}
/* apply image replacement on H2 elements */
h2 {
position: relative;
width: 300px;
height: 150px;
margin: 0;
padding: 0;
overflow: hidden;
}
h2 span {
display: block;
position: absolute;
left: 0;
top: 0;
z-index: 1;
width: 300px;
height: 150px;
margin: 0;
padding: 0;
background: url(h2.gif) top left no-repeat;
}
/* apply image replacement on links with this class */
.fancy_link {
position: relative;
display: block;
width: 200px;
height: 50px;
margin: 0;
padding: 0;
}
.fancy_link span {
display: block;
position: absolute;
left: 0;
top: 0;
z-index: 1;
width: 200px;
height: 50px;
margin: 0;
padding: 0;
background: url(fancy_link.gif) top left no-repeat;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>Welcome to our website<span></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">Read more on this topic...<span></span></a>
</div>
<div id="content">
<h2>Main content section<span></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">Read more on this topic...<span></span></a>
</div>
<div id="footer">
<h2>Footer section<span></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">Read more on this topic...<span></span></a>
</div>
</div>
</body>
</html>
Mission accomplished. As shown before, now all of the <a> elements that have been assigned the previous “fancy_link” CSS class also include a pair of empty <span> tags, which permits image replacement to happen in the correct way.
In addition, if you give the previous code sample a try on your own machine, then you should get a web page rendered as follows:
There you have it. Now, with this final example, you’ve hopefully realized how easy it is to implement the enhanced version of Fahrner’s image replacement method with a decent variety of web page elements. As usual, feel free to edit all of the code samples shown in this tutorial, which will surely sharpen your existing CSS skills.
Final thoughts
In this ninth chapter of the series, I showed how to implement the improved version of Fahrner’s image replacement method for polishing the visual presentation of some <a> elements. The entire styling process was very straightforward, so in theory you’d be able to apply it with only minor effort when creating your own web pages.
Even though this method is pretty efficient and flexible, there’s yet another one that also deserves a close look. In this case, I’m talking about the technique created by Stuart Langridge, which uses the “padding-top” CSS property to perform the corresponding replacement process.
This handy approach will be covered in depth in the article to come, so don’t miss that tutorial!
DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.
Style Sheets 
HTML5 Boilerplate Introduction
