Using Fahrner`s Improved Image Replacement Method with Hyperlinks

As its name suggests, image replacement is a group of methodologies that exploits the functionality of CSS (and sometimes JavaScript and Flash) to decorate a selected text-based web page element with an eye-catching background image, without modifying its inner section of text.

As in many other areas of professional web design, where a specific problem can be solved by using distinct approaches, in the last few years different image replacement methods have been developed by talented people. In consequence, nowadays it’s possible to achieve identical decorative effects with certain selectors of a web document by implementing a variety of image replacement techniques.

I left off the last installment of the series discussing how to apply an enhanced version of the method originally created by Todd Fahrner to style all of the H2 elements contained in a sample web page. This method in particular used a couple of empty <span> tags to hide the elements’ text, while keeping the assigned background images visible.

However, it’s valid to stress here that the method’s major strength rests on its ability to keep the targeted web page elements accessible to users, even when the background graphics aren’t properly downloaded by the browser.

Due to the intrinsic versatility of Fahrner’s approach, it can be used with  numerous elements, not just H2 headers. Therefore, in this ninth episode of the series I’ll be demonstrating how to use it to spice up the visual appearance of some hyperlinks.

Are you ready to learn the full details of this styling process? Then begin reading!