My review of IR methods claimed LIR as the winner a fundamental link flaw lead to further considerations. Thus I present my CSS image replacement method, JIR, which uses CSS2 :before pseudo-element to insert a replacement image in place of, for example, header text. It allows transparent images, displays a header with CSS and/or image off, uses proper semantic code with no extra elements, presents text to search engines, is easy to do, doesn’t need any assistive technology (eg js,php). If this sounds too good to be true, and your a web developer, you’ll already know the gotcha! But there is still light, and a useful advantage, at the end of the post. Read on …

Problems with other methods

In an article by Paul Young, Sitepoint 9 Feb 2009, he makes the following claim about CSS image replacement, which, up until today (following my review) I was in total agreement with:

Most other image replacement techniques (Fahrner, Phark, Gilder/Levin, Leahy/Langridge) use the same CSS when images are on and off. I’ve come to the conclusion that it’s important to make use of different CSS when images are on and off, otherwise the result suffers from one or more of the following side effects:

* The technique breaks easily—for example, when images are disabled or if the replaced image has transparent regions.
* It’s too complex to be implemented rapidly and reliably.
* The technique uses JavaScript to traverse the DOM tree, which causes an undesirable flicker while the page loads (and is brittle for a variety of other reasons).
* The technique may be incompatible with some browsers.

Desirable outcomes for an image replacement method for me then are that:

• the technique works with transparent regions (e.g. PNG transparency), [PNG]
• when images are off a stylable text is shown, [images=off]
• when stylesheets are disabled an unstyled title is shown, [CSS=off]
• resizing with page or text zoom doesn’t break the technique [zoom]
• the replacement image can be a link, and it’s whole area is clickable [link]
• no extra elements (e.g. empty spans) are needed, good semantic markup only
• no assistive technology is needed, JavaScript, PHP, whatever
• the method works across all modern browsers with a 1%+ market share

The method I present here hits 8 out of 9 of these requirements.

This was what I was hoping to find in my review. I found the best method to be Leahy-Langridge (LIR) but it doesn’t include, in the presentations I saw, the ability to set the header up as a link. In my review I’d managed to overlook this important detail until I came to set my WordPress blog up to use LIR and found the H1 logo was no longer linked properly (if you’re pernicious you can find it with some mouse waving).

So, what now.

Example implementations

7 image replacement methods

First I implemented all the methods of the review in an example page with examples of LIR, TIP, GLP, Phark, Position-Absolute and Fahrner image replacement as well as a first stab at a better IR, called LLJ, which is basically LIR with an anchor tag stuck in.

A warning: I can’t guarantee these implementations are correct, I may have missed some nuance or other that renders one of these a better IR than I’m presenting here. Please comment if you spot an error anywhere.

How are the examples deficient?

[There’s a nice table of this below including my test methods and JIR tallied against the desirable outcomes.]

Well clearly (see image) TIP, GLP and Position-Absolute have overlay problems with transparent replacement images, but these are the only ones that present the images as clickable links. Altering LIR by moving the technique of hiding the image in the padding from the H2 to the A tag, a sort of mix of LIR and TIP allows the replacement image to be clickable.

LLJ wins?

Not quite time for tea and crumpets I’m afraid. This LLJ method has serious problems still. CSS = off works, but Images = off presents no heading and certainly not a clickable one. This is, in my opinion, a very servicable method. If you have same height headers and bump the common code to a class you only have to set the background-image value for each replaced header (which I argue later can be done in the HTML content).

<h2 id=”llj” class=”llj”>
<a href=”https://alicious.com” title=”LLS adjusted”>Leahy-Langridge-Jefferies method 1</a>
</h2>

h2.llj {
margin-top: 15px; /* for this particular site, set this as you like */
position: relative; /* allows child element to be placed positioned wrt this one */
overflow:hidden; /* don’t let content leak beyond the header – not needed as height of anchor will cover whole header */
padding: 0; /* needed to counter the reset/default styles */
}
h2.llj a {
position: absolute; /* defaults to top:0, left:0 and so these can be left out */
height: 0; /* hiding text, prevent it peaking out */
width: 100%; /* 686px; fill the parent element */
background-position: left top;
background-repeat: no-repeat;
}

h2#llj {
height: 60px; /* height of replacement image */
}
h2#llj a {
padding-top: 60px; /* height of the replacement image */
background-image: url(“images/replacement/llj.png”); /* the replacement image */
}

Further testing and examples

JIR example / test implementation

From here I tried several changes which were all successful to some extent.

Those alterations and the final JIR technique are shown in the JIR example file, which includes the previous tests, most recent additions are at the top of the examples, I’ll look at them in reverse order here.

• LLJ – uses the anchor-tag to cover the H2 and provide the replacement image in the background of top-padding.
• LLJ2 – took the replacement image out of the background and placed it in an image tag in the header, the image and the header are the same size and so, with overflow:hidden, the anchor simply gets pushed out of view. The anchor no longer works. Images = off gives the unclickable image alt text alongside a stylable clickable header. Images + CSS = off gives the same, but sans styles. CSS = off however messes it all up by giving us the header image and the header text side-by-side. It looks bad, keep trying!
• LLJ3 – we move the image inside the anchor, to make a clickable header image as the default presentation. We’re nearly there it seems, but as with LLJ2 we still have a double header when CSS is off.

This leads to the natural thought of what can make the image appear when CSS is on and disappear when it’s off? The CSS2 pseudo-elements :before and :after, can they do it?!

Introducing JIR

[If you’ve seen this method elsewhere, please let me know, I couldn’t find it when I looked before writing this up. Some posts are close.]

My eponymous IR, JIR, then uses base HTML like so (note that the span is only to style the title, it is not needed for this IR method):

<h2 id=”jir” class=”jir”>
<a href=”https://alicious.com” title=”JIR method”>LLJ4 / <span style=”color:red”>Jefferies</span> IR method</a>
</h2>

With CSS as follows (see JIR example page for live version you can test, I used the  webdeveloper add-on for FF testing):

.jir {
position: relative; /* allows child element to be placed positioned wrt this one */
overflow:hidden; /* don’t let content leak beyond the header – not needed as height of anchor will cover whole header */
padding: 0; /* needed to counter the reset/default styles */
}
.jir a {
position: absolute; /* defaults to top:0, left:0 and so these can be left out */
width: 100%; /* fill the parent element */
}

h2#jir, h2#jir a {
margin-top: 15px; /* for this particular site, set this as you like */
height: 60px; width:632px; /* dimensions of replacement image */
}
h2#jir a::before {
content: url(“images/replacement/jir.png”);
}

The comments there (or in the test CSS file) should be enough to track what’s happening.

Summary and review

Checking now against our desired outcomes, T indicates text shown, I indicate image shown, C indicates linked/clickable:

We actually see that it’s quite close. Now in my opinion linking the header at all times and not displaying a double header if CSS = off are essential. This leaves us with 2 options. Either the JIR method, or the adaptation of LIR+S with clickable anchors that I’ve called LLJ.

Browser compatibility of JIR method

Well, you can tell me. I’ve tested using Virtualbox WinXP and Kubuntu Linux natively and tested visually using browsershots. Browsers tested:

• Mac OSX (visual), Win XP and Linux: include Opera , Firefox, Konqueror, Safari, Chrome
• Win XP: IE5.5, IE6, IE8 beta 2, IE8 beta 2  as IE7

Bet you can tell me the results. This JIR method works everywhere except MSIE. It doesn’t matter which version of MSIE either, all of them fail right up to IE8 beta2 (in my testing), even when I used Dean Edwards IE7/IE8 compatibility JavaScript in conditional comments on the testing page (commented out at present).

This is not really unexpected, no not because MSIE is rubbish (!) but because it doesn’t support the :before and :after pseudo-classes as noted by Peter-Paul Koch at Quirksmode.org in his support grid of CSS2 selectors. Elsewhere you can find notes concerning the lack of support for the CSS3 pseudo-elements which now use double-colon notation – ::before and ::after (MSIE doesn’t support any pseudo-elements).

End of the [short] road for JIR?

You made me read all that and then tell me it won’t work? No.

Well, yes and no.

MSIE users still get a styled header, so you could combine this technique with a simple CSS style for IE, or possibly use the IE’s support for downloading EOT fonts (or maybe not). But realistically until MSIE is supporting these pseudo-elements then JIR is not going to be sweeping the web. I hope I’ve shown here that JIR is a positive method that is more accessible, more user friendly, better SEO-wise and better graphically (allows transparency) only let down by browser support.

Surprise!

The winner is LLJ

The most common implementation of image replacement across the web appears to be FIR. FIR is seriously lacking and many designers are using the Leahy-Langridge method (LIR). But this too in its default does not include a full sized link element. LLJ keeps the benefits of LIR and adds clickability, keeps semantic HTML and avoids showing a double header when CSS is disabled. LLJ is light-weight only requiring the setting of a per-element background-image over a class. My recommendation therefore is LLJ. It evens works in IE6+ (transparency problems aside, consider sending IE gifs).

Thanks for stopping by please feel free to comment or ask questions.

For my next foray into CSS image replacement I intend to extend LLJ to implement sprites.