This is a slightly changed variant of the Fahrner Image Replacement technique.. It adresses a critical flaw that makes the content unusable if images are turned off in a graphical browser. Sadly, it still requires additional markup to achieve the effect.
Steve Clay has put together a great comparison of IR-techniques and found some problems with Andrews technique if it is used in more complex environments.
Michael Ryznar solved a problem of with IE5/mac which did not calculate the height of the heading correctly.
<h1 class="replace" id="myh1">Headline<span></span></h1>
.replace{
position:relative;
margin:0px; padding:0px;
/* hide overflow:hidden from IE5/Mac */
/* \*/
overflow: hidden;
/* */
}
.replace span{
display:block;
position:absolute;
top:0px;
left:0px;
z-index:1; /*for Opera 5 and 6*/
}
#myh1, #myh1 span{
height:100px;
width:300px;
background-image: url(head.png);
}
I made a table that tries to answer the question when to use which IR-technique
2004-03-20, Levin Alexander Mail