Chapter 14: Image Replacement

 < Day Day Up > 



As more designers and developers are turned on to the advantages of using web standards, and specifically CSS, new techniques are being discovered every day and the envelope is continually being pushed. New, better ways of accomplishing goals are evolving regularly.

A prime example of this evolution can be found in the art of "image replacement"—a technique for using CSS to replace plain hypertext with stylized images.

How Can I Use CSS to Replace Text with Images?

It would be ideal to hold all presentational (nonessential or decorative) graphics within CSS, allowing you to easily swap out updated images, while keeping the markup exactly the same. Also, we can ensure all browsers and devices get the meaning of the markup first, whether or not they fully support the advanced CSS required to swap text for images. I've been preaching advantages like this throughout the entire book.

No Perfect Solution

However, finding the "perfect" method to swap text for images that are referenced only by CSS is much like the search for the Holy Grail. It doesn't yet exist. There are methods that work in all browsers, but fail in assistive software, such as a screen reader. There are other methods that work fine, unless users have specified that their browser show no images, yet still enable CSS.

While no one method at the time of this writing satisfies everyone, or every user, the techniques are used today on a variety of sites. One should use caution when applying any image replacement method and understand the drawbacks that come attached.

Use, but with Caution

This is the purpose of this chapter—to explain the flexibility that comes with image replacement, but to also show where it falls short. As time passes, more CSS aficionados may discover better ways to accomplish the same results. And until then, we'll have to work with what we have, weighing the pros and cons.

To get you familiar with the idea of image replacement, let's take a look at several popular methods out there, beginning with the Fahrner Image Replacement (FIR) technique that started it all.



 < Day Day Up > 



Web Standards Solutions. The Markup and Style Handbook
Web Standards Solutions: The Markup and Style Handbook (Pioneering Series)
ISBN: 1590593812
EAN: 2147483647
Year: 2003
Pages: 119
Authors: Dan Cederholm

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net