Using Fahrner`s Improved Image Replacement Method with Hyperlinks

In the section that you just read, I used a basic example to illustrate how to implement Fahrner’s enhanced method to decorate some HTML headers. Since this replacement process can be extended easily to other web page elements, I'm now going to use the method for styling some basic hyperlinks.

Having said that, it’s necessary to create a background image that will make the links look slightly more appealing. Below I included one that does exactly that and also contains no transparent pixels:

Wit this image available for immediate use, it’s time to code the CSS block that will perform the corresponding replacement process on all of the web page elements that have been assigned a “fancy_link” CSS class. Here’s how this set of CSS styles looks:

.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;

}

If you’ve been paying close attention to the examples developed so far, then you’ll find the above code fragment very easy to grasp. Its driving logic is exactly the same. In this case, the background image used by the previous “fancy_link” CSS class is the one created just a moment ago, but in a typical situation you'll probably want to use your own pictures.

So far, so good. At this point, I showed you the CSS code required to perform the pertinent replacement process on all of the web page elements that have the “fancy_link” class tied to them. As my plan here is simply to style some hyperlinks, in the following section I’ll be creating an XHTML document that will assign this class to a few <a> elements.

Now, to see how this will be done, read the lines to come. We’re almost finished with this image replacement method!