NB: This page is archived without styles. Go to our home page or read my blog.

Malarkey Image Replacement (MIR)

The Malarkey Method of image replacement works by simply styling each element to be replaced with a background-image and ‘letter-spacing : -1000em;.’

No additional <span> tags are required. This method appears to overcome some ‘text-indent : -999px;’ issues in certain browsers which trigger huuuuuge horizontal scrollbars.

Tested using the following web-browsers,

Windows Opera 8 (Beta), Opera 7 needs the ‘html > body’ hack.

For each of the examples shown, ‘letter-spacing : -1000em;’ has been added to style rules to remove the text. For efficiency I’ve created a global class of .mir containing the letter-spacing, although letter-spacing can be added to individual rules as required. (Thanks to Robert Jan Verkade for the MacIE fix.)

.mir { letter-spacing : -1000em; }
/* Just for Opera, but hide from MacIE */ 
/*\*/html>body .mir { letter-spacing : normal; 
text-indent : -999em; 
overflow : hidden;}
/* End of hack */

Replacing an h1 element

The first and common example replaces an <h1> element with a graphical header:

<h1 class="mir">Magilla Gorilla</h1>
h1.mir {width:640px; height:270px; background:url(mir-h1.png) no-repeat;}

Magilla Gorilla (replacing an h1 element)

Replacing an <h2> element

Of course, replaced elements need not be direct image replacements of their ‘real’ content. Here we replace an <h2> with Magilla Gorilla:

<h2 class="mir">Magilla Gorilla</h2>
h1.mir {width:250px; height:270px; background:url(mir-h2.png) no-repeat;}

Magilla Gorilla (replacing an h2 element)

Replacing a <p> element

<p>s work just as well.

<p class="mir">Magilla Gorilla is…</p>
p.mir {width:165px; height: 270px; background:url(mir-p.jpg) no-repeat;}

Magilla Gorilla is a fictional gorilla and the star of The Magilla Gorilla Show by Hanna-Barbera that aired from 1964 to 1966. Magilla Gorilla is an anthropomorphic gorilla who spends his time languishing in the front display window of Melvin Peebles’ pet shop, eating bananas and being a drain on the businessman’s finances.

Replacing a navigation list

Ah… but what about a graphical navigation list. Let’s give that a try.

<ul class="mir">
<li><a id="mir-a1" href="#">Magilla Gorilla text</a></li>
<li><a id="mir-a2" href="#">Magilla Gorilla text</a></li>
<li><a id="mir-a3" href="#">Magilla Gorilla text</a></li>
<li><a id="mir-a4" href="#">Magilla Gorilla text</a></li>
</ul>
ul.mir {width:400px; padding:0; list-style-type:none;}
ul.mir li {display:inline;}
ul.mir li a {float:left; display:block; width:100px; height:100px;}
a#mir-a1 {background:url(mir-a1.jpg) no-repeat;}
a#mir-a2 {background:url(mir-a2.jpg) no-repeat;}
a#mir-a3 {background:url(mir-a3.jpg) no-repeat;}
a#mir-a4 {background:url(mir-a4.jpg) no-repeat;}

Th, th, th, that’s all folks!