Wrapping Hyperlinks with Span Tags for Image Replacement
(Page 1 of 4 )
In this sixth part of a multi-part series on CSS-based image replacement techniques, I demonstrate, with some easy-to-follow code samples, how to apply Fahrner’s image replacement technique to a group of web page links to make them look slightly more appealing.
If you're a web designer who wishes to learn fashion how to implement within your own web pages the most common style-sheet-based image replacement methods developed so far, then don't look any further because this group of articles is the material that you may want to read.
Welcome to the sixth installment of a series that provides an overview of image replacement techniques. This series gets you started using some of the most popular image replacement CSS-based approaches available at present, so you'll be able to pick the one that best suits your personal requirements and preferences.
And now that you know what to expect from the series, it's time to make a rapid summary of the topics that were discussed in the last chapter. In that article I showed you how to implement the image replacement method originally created by Todd Fahrner with all of the H2 headers included in a sample web page.
Essentially, this method employed a couple of additional <span> tags for hiding the text of the element being styled, which allowed us to keep its background image completely visible. Even though the method requires coding some extra markup, which from a purist's point of view can be considered a cardinal sin, it's very easy to learn and can be applied in a great variety of contexts.
Considering the inherent flexibility offered by Fahrner's approach, in the next few lines I'll be demonstrating how to use it to decorate some basic web page links, a process that surely will be very straightforward for you, trust me.
Now, leave the dull theory behind and join me in this didactic journey, so you can learn a few more things about this image replacement method. Let's go!
Next: Review: using Fahrner's image replacement method with H2 elements >>
More Style Sheets Articles
More By Alejandro Gervasio
