Characature of Ron

Using CSS to Replace HTML With Sylized Images

Below are examples of using headings for less able browsers, and various techniques to replace the text with images. Please check out the source code to see how we coded these examples:

Fahrner Image Replacement

Leahy/Langridge Image Replacement

The Phark Method

In the following example, we use CSS to change the background-position that reveals each state at the appropriate time. Using an image with three states eliminates the need to use Javascript to swap images and preload multiple sets of images:

From Web Standards Solutions The Markup and Style Handbook by Dan Cederholm:

Image Replacement is a technique for using CSS to replace plain hypertext with stylized 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.

Cederholm, Dan Web Standards Solutions - The Markup and Style Handbook. friends of ED, 2009.

For more information, go to

© 2017 rLind. Not intended for general public view. Created as a project for Shoreline Community College VCT270. For educational purposes only.