Image replacement

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.

Update 2004-03-20

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>

The CSS:

.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); }

Works in:

Fails in:

I made a table that tries to answer the question when to use which IR-technique

2004-03-20, Levin Alexander Mail