Welcome to Particletree!

Introduction

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.

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

Implementation

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.