JIR and other CSS image Replacement Examples

The problems with IR methods thus far, as demonstrated below, have already been discussed. LIR came out on top but didn't include a link / anchor to allow headings to be used as links. The methods that do work well for linking TIP, GLP and Position-Absolute don't allow for the use of transparent images and you can claw the PNGs from my cold dead fingers, I'm not giving that up.

This is my attempt to fix CSS image replacement and provide my ultimate CSS IR technique, which I've dubbed JIR.

The following examples are all using CSS techniques to hide text and show an image. When choosing the best for your circumstances you should consider the position in your layout - some decalarations (eg position:absolute) remove an element from the flow. You should test with CSS on/off, images on/off and with a range of text and document zooms (I usually test 2 steps either side of default).

Note that image text differs slightly from the header/anchor/span text as I've chose text to be about the same size.

LLJ4 / Jefferies IR method

Fixing duplicate anchor text and image when CSS = off, images = on.

The only way I could see to do this, as we're looking for a fix with CSS = off, is to either get rid of the text or the image. As I'm an SEO too I went for keeping the text and dynamically including the image, but how. My first thought had been jQuery, but then I wanted to keep CSS and as simple as possible, so I thought to try the CSS 2 ::before and ::after selectors [quirksmode]. They work great, I keep the header with a child link with text inside and simply pop the image content in with the ::before selector.

I was really really happy with this method until, as I dreaded, I came to test it in MSIE. As you'll see in the quirksmode link above MSIE doesn't support ::before and ::after, not even in the recent IE8beta2. Everything else I've tried works with JIR, that means several versions of Opera, Safari, Konqueror, Firefox

Leahy-Langridge-Jefferies method 3

Fixing images=off? LLJ2 worked except with images = on the link wasn't accessible. Having moved IMG to indside anchor at start this LLJ3 works, is linkable, displays link with or without images on and with or without style. The only problem remainging is that with CSS = off we get both the anchor and the image.

Leahy-Langridge-Jefferies method 2

Fixing images=off? This works but hides the link ability of the header except when images are off... //Adjusted the LL method with the title moving from Shea's suggested position to an anchor that wraps the text. The anchor is padded and bg-image added as the original LL method did with the header element. This gives us good results for CSS = off, images = off. It allows use of transparent images. It uses no extraneous markup or empty elements.

Leahy-Langridge-Jefferies method 1

Adjusted the LL method with the title moving from Shea's suggested position to an anchor that wraps the text. The anchor is padded and bg-image added as the original LL method did with the header element. Anchor is made display block. This gives us good results for CSS = off, images = off. It allows use of transparent images. It uses no extraneous markup or empty elements. It rocks! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id neque. Proin hendrerit sapien.

Leahy-Langridge method

Plain LIR method with the Shea addition (title text). Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id neque. Proin hendrerit sapien. Suspendisse facilisis bibendum lacus. Nam sit amet tellus at ligula dapibus porta. Sed magna mauris, faucibus vel, auctor eget, faucibus id, ligula. Nulla tempor porta purus. Cras in ligula blandit massa ultrices viverra. Phasellus erat eros.

Thierry Image Placement

Thierry lost me a bit with his implementation which switched in the final step to using an anchor instead of the previously proposed image, but I think this is a proper implementation of what he proposes, let me know. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id neque. Proin hendrerit sapien. Suspendisse facilisis bibendum lacus. Nam sit amet tellus at ligula dapibus porta. Sed magna mauris, faucibus vel, auctor eget, faucibus id, ligula. Nulla tempor porta purus. Cras in ligula blandit massa ultrices viverra. Phasellus erat eros.

Gilder-Levin-Pixy method

Using an anchor tag in place of the originally specified span. Note that an anchor for a title is always useful whether used to connect to an external resource or used to add a name for intra-document jumps. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id neque. Proin hendrerit sapien. Suspendisse facilisis bibendum lacus. Nam sit amet tellus at ligula dapibus porta. Sed magna mauris, faucibus vel, auctor eget, faucibus id, ligula. Nulla tempor porta purus. Cras in ligula blandit massa ultrices viverra. Phasellus erat eros.

Mark Rundle, Phark method

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id neque. Proin hendrerit sapien. Suspendisse facilisis bibendum lacus. Nam sit amet tellus at ligula dapibus porta. Sed magna mauris, faucibus vel, auctor eget, faucibus id, ligula. Nulla tempor porta purus. Cras in ligula blandit massa ultrices viverra. Phasellus erat eros.

Position absolute

Farner Image Replacement

The method I presented is not particularly neat but once you've set your .hx-ir classes then you've little to do for each individual header, particularly if you keep them to a fixed height. With the height fixed the height and padding attributes can be moved to your class and the only declaration needed per header is the background-image, I'd be tempted to include this in the HTML file itself as these backgrounds are being used as-if content (ie they replace textual content with pure visual content) - the backgrounds here are not merely style elements for your media:screen users.

New CSS Linked Image Replacement, LLJ method

Fixing the Leahy-Langridge IR method

Method 2 - attempting to fix images=off