: サイト構築 -CSS

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

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

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

画像オフの場合は、リンクはテキストで表示。
CSSオフの場合は、リンクはリストで表示。
画像オフで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>

Post on:2009年11月20日