You are here:About>Computing & Technology>Web Design / HTML> CSS> Advanced CSS> Image Replacement
About.comWeb Design / HTML

CSS Image Replacement

There are various techniques in CSS where you can write a headline in text and then replace that text with an image. This category explains some of the many ways to do image replacement, and provides some commentary on the use of image replacement on Web pages.
Using Background-Image to Replace Text - Stop Design
This is the original image replacement tutorial that started it all. It is not recommended for use because it makes the hidden text completely inaccessible in certain situations. It is included here for reference and historical purposes.
Image Replacement - Mo Jebus
Seamus Leahy came up with a way to drop the extraneous span tag and replace text with images. This site currently has some issues in IE 6.
A new image replacement technique - As Days Pass By
Stuart Langridge came up with the same idea as Leahy, but this site is more like a tutorial. If you learn better by hacking at examples, go to the Leahy site above, if you learn better from tutorials, go to this site.
Accessibile Image Replacement - Mike Rundle
This is often called the Phark Image Replacement technique. It is more accessible than the techniques listed above, and has been tested in the JAWS screen reader. But IE 5 seems to have difficulties with it and Safari has some issues with scrollbars.
Image Replacement Maps - Your Total Site
Here's an interesting technique that combines image replacement with image maps. There are no details about the accessibility of this technique, but it's an interesting idea.
sIFR - Scalable Inman Flash Replacement
This is a typography solution that allows the Web designer to use a very specific font that might not be on the customers' computer. It uses JavaScript and Flash to translate portions of the text on the page into Flash images so that they display exactly as intended by the designer. The biggest benefit to this method is that it is acceptable to Google and would not be considered cloaking.
Facts and Opinions about Fahrner Image Replacement - A List Apart
Joe Clark writes an article discussing the pros and cons of using image replacement, especially FIR. If you're curious how FIR works with screen readers, look no further.
 All Topics | Email Article | | |
Advertising Info | News & Events | Work at About | SiteMap | Reprints | HelpOur Story | Be a Guide
User Agreement | Ethics Policy | Patent Info. | Privacy Policy©2008 About, Inc., A part of The New York Times Company. All rights reserved.