Clagnut

Menu

JavaScript-enhanced image replacement

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 by a short piece of unobtrusive JavaScript supplementing existing IR techniques:

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

The checkImages() function should be called by a window.onload handler. The function determines whether images are turned off by checking the offsetWidth of an existing inline image – the logo in this case. 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 (Phark in the case) is reversed to reveal the heading text.

You can see the script in action in my sandbox. I’ve also highlighted some of the known issues, so please have a read of those before commenting.


Fatal error: Call to a member function getAttribute() on a non-object in /home/clagnutc/public_html/includes/thirdparties.inc.php on line 97