1. Computing
Send to a Friend via Email

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.

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.

Discuss in my forum

©2014 About.com. All rights reserved.