Malarkey Image Replacement (MIR)

There is a detailed tutorial available on how this page was created, and a link to my test page.

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 have 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">The Malarkey Method (replacing an h1 element)</h1>

h1.mir {width:400px; height: 185px; background:url(mir-h1.jpg) no-repeat;}

The Malarkey Method (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 that groovy Malarkey geezer.

The Malarkey Method (replacing an h2 element)

Replacing a p element

<p>s work just as well.

<p class="mir">Lorem ipsum dolor sit amet...</p>

p.mir {width:400px; height: 265px; background:url(mir-p.jpg) no-repeat;}

The Malarkey Method (replacing a p element). Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

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="#">Link text</a></li>
<li><a id="mir-a2" href="#">Link text</a></li>
<li><a id="mir-a3" href="#">Link text</a></li>
<li><a id="mir-a4" href="#">Link 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!

There is a detailed tutorial available on how this page was created.

By the way, these images ain't fo stealin'.