The premise

Most image replacement (IR) techniques work by displaying a background image of text and shifting the real text out of view. This is fine unless you have images turned off, in which case you will see neither the graphical text nor the real text.

So the requirement is to disable the IR if images are turned off. This can be accomplished with a short piece of unobtrusive JavaScript.

The script detailed here fires on load. It tries to determine if images have loaded and if not it undoes the CSS in the IR technique. This script has been successfully tested in Firefox, Opera 7.5, IE6 and Safari 1.3 (not that you can turn images off in Safari).

An example

The following should show a header graphic (extracted from a forth-coming website). If you turn images off, you should see real text instead.

The HTML is fiendishly simple:

<div id="heading">Golf Breaks</div>

I've used a div with an id; you would probably use an h1 or some other meaningful mark-up. The style rules applied to the div use the Phark method of IR (this is my preferred method as it is so simple):

#heading {
  /* IR stuff */
  width:402px;
  height:111px;
  background: #005A00 url(/sandbox/golfheading.jpg) no-repeat;
  text-indent:-1000px;

  /* Style for text when visible*/
  color:#fff;
  font-size:60px;
  font-style:italic;
}

The script

Here is the script in its entirety. You can download it from jir.js.

function checkImages() {
  if (document.getElementById) {
    var x = document.getElementById('logoimg').offsetWidth;
    if (x != '134') {
      document.getElementById('heading').style.textIndent = "0";
    }
  }
}

window.onload = checkImages;

The code explained

The checkImages() function determines whether images are turned off. It does this by checking the offsetWidth of an existing inline image - the logo in this case, as it is ever present. If the offsetWidth of the image element does not equal the known width of the image then images are assumed to be turned off and the IR technique is reversed to reveal the heading text.

Note that in order for the script to work, the targeted image element must not have any width or height attributes and its size must not be specifically set in a style sheet.

Known issues

• The script relies on there being an image element in the document. This feels clunky but it's hardly an unlikely situation given that you can target a logo image.
• This script only fixes the images turned off scenario. It will not display real text while images are loading over a slow connection, although you could easily get the script to reverse its behaviour and apply IR if images have loaded.
• If the chosen test image fails to load, the script will be fooled into thinking images are turned off and will display the real text. You could reduce the probability of this by checking two test images.
• In IE/Win, if the image has been previously cached and images are subsequently turned off, the image element still retains the dimensions of the cached image and so the script is fooled into thinking that images are still turned on. A nasty way around this would be to apply a random query string to the target image so that it is always requested from the server.