Using the DOM to automate my Image Replacement technique

This article was first published on (01-01-2006).

This is about relying on Javascript to implement the method without polluting the markup with img elements.

If you don't know about this particular solution yet, you can read this article and check examples of the original technique (demo 1, demo 2, demo 3, demo 4, demo 5).

We start with this simple (X)HTMLmarkup:

<h2 id="products_126_30">1. Products</h2>
<p>Lorem ipsum...</p>
<h2 id="portfolio_126_30">2. Portfolio</h2>
<p>Lorem ipsum...</p>
<h2 id="services_126_30">3. Services</h2>
<p>Lorem ipsum...</p>

That's all we need. From there, the script does the following:

That's it, authors have nothing else to do than making sure they have an image to match ids used in their headings. There is no array of images or anything, elements can be added/removed to/from the document without any problem.
Note that content managers should find this technique particularly useful because they can "embed images" in the (X)HTML markup rather than in the script itself.

Take a look at this technique in action

Using CSS rules:

Images have been given a class ("z_IMG") but you can use the id of the headings to target specific ones if you wish, for example:

#portfolio_126_30 img {...}

How to use this script:

First, download (1 KB) and unzip the file into a directory within your site. Then, use a script element to link the JS file (TJK_tip.js) to your pages within the head element of your documents, as shown below:

<script type="text/javascript" src="/js/TJK_tip.js"></script>

Note: In this case, the file has been saved inside a directory called "JS" within the root folder.

Then you'll need to use the onload event to call the function. I'd recommend using this technique; but most important, do not forget to pass to the function the heading you want to target. For example, if you're using the onload attribute of the body element and wanted to apply this technique to your h2, you'd have:

<body onload="TJK_tip('h2');">

Things to make sure of:

This technique relies entirely on id values so it is very important that you name your images following this particular format:
name + '_' + image width + '_' + image height

Note that the script will ignore headings with id values that do not follow the above format ("xxx_xxx_xxx"); so you still can use ids for other purpose.

The last thing to think about is to edit the path to your images folder (see code below).

Is this technique "safe" to use ?

If you look at the generated source code of the demo page you see that the text in the heading is not replaced by the image, they are both in there. That text is present regardless of the status of the image (created or not, downloaded or not).
Also, because the ALT attribute's value is empty, there is no redundancy in Assisitive Devices nor visual Agents (when images are replaced with alt attributes).

Also, another advantage of the technique (img elements vs. background images) is that these images are sent to the printer.

For the curious:

This is the script:

function TJK_tip(heading){// v1.1.2 Copyright (c) 2006 TJKDesign - Thierry Koblentz
// Edit "z_FolderPath" to match the path of your image folder
if (!document.getElementsByTagName || !document.createElement) return;
    var z_FolderPath = "<span class="highlighter">/articles/img/</span>";
    var z_H=document.getElementsByTagName(heading);
    for (var x=0;x<z_H.length;x++){
    // we ignore this heading if it has no ID or if different than "xxxx_xxxx_xxxx"
        if (!z_H[x].getAttribute("id") || z_H[x].getAttribute("id").split("_").length!=3) return;
        var z_WIDTH = z_H[x].getAttribute("id").split("_")[1]+"px";
        var z_HEIGHT =z_H[x].getAttribute("id").split("_")[2]+"px";
        var z_FILE =z_FolderPath+z_H[x].getAttribute("id")+".gif";
        var z_IMG = document.createElement('img');
        z_IMG.width="1"; // in case JS is on and CSS is off

This script should degrade nicely in JS-challenged UAs.