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.

Golf Breaks

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 */
  background: #005A00 url(/sandbox/golfheading.jpg) no-repeat;

  /* Style for text when visible*/

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