[CSS]IE6にも対応したテキストリンクをPNG画像に置換するスタイルシート

IE6にも対応したテキストリンクをPNG画像に置換するスタイルシートをCSSplayから紹介します。

PNG image replacement in links
demo

IE6への対応に加え、下記の配慮もされたものとなっています。

1. 画像オフの場合は、リンクはテキストで表示。
2. CSSオフの場合は、リンクはリストで表示。
3. 画像オフでCSSオフの場合は、リンクはリストで表示。

HTMLは下記のように各ラベルに透過gifが配置されています。

<div id="backing">
<ul id="imgReplacement">
<li class="home"><a href="#url1"><img src="ir/trans.gif" width="0" height="0" alt="" />HOME</a></li>
<li class="products"><a href="#url2"><img src="ir/trans.gif" width="0" height="0"  alt="" />PRODUCTS</a></li>
<li class="services"><a href="#url3"><img src="ir/trans.gif" width="0" height="0"  alt="" />SERVICES</a></li>
<li class="location"><a href="#url4"><img src="ir/trans.gif" width="0" height="0"  alt="" />LOCATION</a></li>
<li class="privacy"><a href="#url5"><img src="ir/trans.gif" width="0" height="0"  alt="" />PRIVACY</a></li>
</ul>
</div>