"Yet Another" Image Replacement Technique?

[via Mezzoblue] I was a little surprised that this new image replacement - or, should I say "placement" - technique didn't get a little more press when it came out as it looks pretty interesting.

The limititation of traditional image replacement techniques are well documented. However, according to Thierry, the author, the Thierry Image Placement technique gets around all of these issues by adopting a slightly different approach which centers upon the inclusion of a 1×1 px transparent image along with the text to be replaced.

<h1><img src="/img/clear.gif" alt="" />Hello World</h1>

This image is then used as the hook for applying the desired background image:

h1 {position:relative}

h1 img {
	z-index:1;	
	position:absolute;
	top:0;
	left:0;
	width:538px;
	height:1.7em;
	min-height:28px;
	background:transparent url(/img/helloworld.gif) no-repeat;
	border:1px dotted red
}

Conclusions

This is definitely an interesting technique, although my first impulse is to shy away from adding transparent gifs to my HTML - having discontinued this practice for so long, it's hard to go back.

So, I'm not whether to adopt this one or not. My sense is that if you want to replace text with images, the best way to go about it is to use sIFR because it is so elegant and easy to employ across a whole site.

Posted on: September 7, 2005 | No comments

Recent Entries in "CSS"

Comments

Comments are closed for this entry.

Subscribe

Subscribe to my RSS FeedSubscribe to my Web Design Blog RSS Feed

TOP STORES

Categories

Proud member of 9rules network