Neal Venditto

NIR

March 14, 2005

There are numerous methods in use for replacing text with images. Dave Shea has an interesting article about these different techniques, including his, often referred to as SIR. I’ve seen this technique used most often. It is not, however, without it’s criticizsms, like the others. The main complaint for it that I’ve seen is the use of an empty span element. What’s the point of that span element in the markup? It by itself signifies nothing, and empty is pointless. Nitpicking? Probably. But at any rate, I set out to try my own hand at this image replacement buisness.

Step one was coming up with a name. A bit hasty of me? Yes. I followed the pseudo-standard method of naming and called my technique the NIR technique, or Neal Image Replacement. Now, armed with a name, I set out to develop a technique.

The simplest method I’ve seen involves using a negative value for text-indent in a heading to remove the text from view. Something along the lines of:

h1 {
width:400px;
height:100px;
background:url("image.jpg") top left no-repeat;
text-index:-5000em;
overflow:hidden;
}

This results in pushing the text outside of the viewable H1 element. Works fine, and textreaders can still read it. But if one has CSS enable, but images turned off (Actually done by many users with slower dial-up internet connections) then the text is unreadable. As you can see, Dave Shea adds an extra SPAN element, with a background, then expands and covers the text. As I sought a theory for my technique, I realized that there’s no getting around it. I need to use another element.

My technique involves the use of the z-index property. Basically, I encase the text of a header element in a span element, thus having semantic markup. I give the header element a background, and give the span element a negative z-index so that it is placed behind this header. Should the image not show, the text is perfectly visible. I have to add a z-index of 1 to the body for the text not to be completely buried, however. So, this is an excerpt from an HTML document utilizing the method:

 <style type="text/css">
 body {
  background:#d3d3d3;
  position:relative;
  z-index:1;
 } 

 .nir {
  background:transparent url('image.jpg') top left no-repeat;
  height:100px;
  width:400px;
 } 

 .nir span {
  position:relative;
  z-index:-1;
 }
 </style>

</head>
<body>
 <h1 class="nir"><span>Top-Level Text</span></h1>

I’ve an example page set up to demonstrate it. So now, just a few notes on this. The dimensions of the header element should be set to the dimensions of the desired image. Also, many people like to use these header/images as links. Using this technique, just place an anchor inside the header tag, with the span and header tag inside the link. Then, give your link the following properties:

.nir a {
 display:block;
 width:100%;
 height:100%;
 text-docration:none;
}

And you’ll have a fully functional link. (Note: removing the underline is neccessary as some browsers paint underlines on top of the image)

Browser compatability is crucial on the web, isn’t it? Well, I’ve tested this and know that it functions properly in Internet Explorer versions 5.0, 5.5, 6.0, and 7.0. In Opera 7.5, 8.0 and 8.5, and in Mozilla Firefox 1.0, 1.5, and 2.0. In Lynx, the header text is perfectly visible, leading me to believe this will also work in audio browsers, though I’ve no way of testing that. In addittion, thus far, I’ve been unable to test on other systems, since I do not have access to other systems. If you can veryify that this is properly working with CSS on and Images on/off in other browsers, or on systems other than Microsoft Windows, please let me know.

However useful this really is or isn’t, it was fun. I often enjoy experimenting with new things in CSS, and when you read the CSS 2.1 Specification, it really allows you to understand what’s going on with your styling and how to better code out your designs.

MY Haven

NIR