Home arrow Style Sheets arrow Wrapping Hyperlinks with Span Tags for Image Replacement
STYLE SHEETS

Wrapping Hyperlinks with Span Tags for Image Replacement


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.

Author Info:
By: Alejandro Gervasio
Rating: 3 stars3 stars3 stars3 stars3 stars / 2
December 01, 2009
TABLE OF CONTENTS:
  1. · Wrapping Hyperlinks with Span Tags for Image Replacement
  2. · Review: using Fahrner's image replacement method with H2 elements
  3. · Styling some hyperlinks
  4. · Binding the CSS block to a simple XHTML document

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
Wrapping Hyperlinks with Span Tags for Image Replacement
(Page 1 of 4 )

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!


blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...
- CSS3 Animated Image Gallery: Transitions
- CSS3 Properties: Fixed Heights with box-sizi...
- CSS3 Properties: Altering Strokes and 3D Eff...
- CSS3 Properties: Text-Stroke
- CSS3 Transitions: Width and Height Properties
- Creating a Drop Down Menu in CSS3
- Intro to CSS Transitions

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 6 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials