After a tour through mezzoblue’s museum of image replacement, I noticed all of the choices seemed to be attacking the problem in an undesirable fashion. Nearly all of them approached the problem as if the html markup needed to indicate where the replacement needed to occur rather than the css. The techniques required the html documents to add ‘span’ tags, attributes or ids/classes to signpost replaced text. For individuals hoping to build semantically meaningful documents that divorce presentation and structure completely, these little techniques/hacks seem like flies in the ointment.

HTML Form Builder

Until XHTML 2 makes it on the scene and brings us the ‘src’ attribute to every element, I think we can find a better solution. Here’s how we approach it:

Q : What do we want to change?
A : Presentation.

Q: Where do we change presentation?
A: In the css file.

Q: Can we change the css dynamically?
A: Absolutely.

Q: How?
A: Javascript and CSS Rules!

See It In Action

Example #1


  1. Download cssImgReplace.js and reference the javascript file by adding the following line between the ‘

    ’ elements of your HTML document: ‘

  2. Set the css background property to ‘fixed 5000px 5000px’ for whatever css rule you want to use image replacement.

  3. There is no step three. You’re done. No extra spans. No additional change to your markup. If you want to show the tool tips on mouse hovering (like you see on images with alt attributes) just set a title attribute for your element (e.g. ‘title=”Your title for image here”’ and that should do it.

The Code

function imgReplace(){    if (document.all){var cssRule = document.styleSheets[0].rules;}
    else {var cssRule = document.styleSheets[0].cssRules;}    for (var i=0; i<cssRule.length; i++){        cssPosX = cssRule[i].style.backgroundPositionX; 
        cssPos = cssRule[i].style.backgroundPosition;         if (cssPosX =="5000px" || cssPos == 5000px 5000px){
                cssRule[i].style.backgroundPositionX =" 0px";
                cssRule[i].style.backgroundPositionY =" 0px";
                cssRule[i].style.backgroundPosition =" 0px 0px";        
                cssRule[i].style.backgroundAttachment =" scroll";
                cssRule[i].style.textIndent =" -5000px";

How It Works

Instead of traversing the html and changing the properties of elements and ids via the ever popular ‘getElementById’, we’re going to use the DOM to move through the stylesheet and change the css rules the replace text. When we find a rule that uses a background position of ‘5000px 5000px’, we’ll change the CSS rule so the background image shows and the text is gone.

Combine this with a checkImages function and you’ll have a solid image replacement technique that’ll degrade properly whether you have images on or off, javascript on or off or even styles on and off.

HTML Form Builder
Kevin Hale

CSS Rules! for Image Replacement by Kevin Hale

This entry was posted 5 years ago and was filed under Features.
Comments are currently closed.


  1. Jeff Croft · 5 years ago


    I agree. Certainly people have overused classes and such, especially when it comes to image replacement. But they should have to. Using descendant selectors and such, you ought to be able to target the element you want to replace without the need to add a frivolous, presentation-only class like “replace.”

    I guess what I mean is: if someone is adding “replace” or another non-meaningful class to an element in order select it in CSS for replacement, then they have made a bad decision — but that’s not necessarily the fault of the image replacement technique itself. The same technique probably could have been used without the lousy class name. :)

  2. HaloprO · 5 years ago


  3. kemar · 5 years ago

    The supposed replaced text is showing with the replacement image in the IE/Mac 5.2. Why is that so?

  4. Gaetan · 5 years ago

    One of the main problem of this technique for me is printing… Nothing appears when printing the document.

  5. Rob Sutherland · 5 years ago

    Great technique. Why didn’t I think of that? As for things not printing wouldn’t changing/setting the text-indent property to 0 for @media print.

  6. Sue · 3 years ago

    Greetings to the author of this page. Nice site, keep up the good work cupcake wedding cake

  7. Sue · 3 years ago

    Your site is great! It is very impressive. I’ve enjoyed the visit! cupcake wedding cake

  8. Julie · 3 years ago

    The site’s very professional! Keep up the good work! weight watcher cook book

  9. Julie · 3 years ago

    Excellent! Good work! Would you please also visit my homepage? weight watcher cook book