» 画像置換-text-indentCSS TIPS with WebCreativePark

画像置換とは、html上に記述されているテキストを画面外に表示して背景のみを表示する技術の事で、CSSでデザインを行う際にとても重宝する技術になります。

画像置換の仕方

たとえば以下のような(X)HTMLソースがあります。

<p>とあるWEBクリエイターのblog</p>

この(X)THMLソースに以下のようなCSSを適応させるとにより、テキストを画像で表現することが可能です。

p{
	width:400px;
	height:50px;
	text-indent:-9999px;
	background:url("logo.gif") top left no-repeat;
}

サンプル

ロールオーバーイメージ

画像置換がクローズアップされたのは、JavaScriptを使わずにCSSのみでロールオーバーイメージ（マウスが上にくると画像が変わるテクニック）を行うことができたからです。

ロールオーバーイメージを行う際の(X)HTMLは以下のようになります。

<a href="http://blog.webcreativepark.net/">とあるWEBクリエイターのblog</a>

ごくごく普通のリンクですが、以下のようなCSSを使いロールオーバーイメージを適応することが可能になります。

a{
	display:block;
	width:400px;
	height:50px;
	text-indent:-9999px;
	background:url("logo.gif") top left no-repeat;
}
a:hover{
	background:url("logob.gif");
}

サンプル

ポイントとしてはimg要素のdisplayプロパティをdisplayに変更して、widthやheightの指定ができるようにしています。

ロールオーバーの実装にはhover擬似クラスを使っています。

プリリロードの実装

画像置換によるロールオーバーは、画像のチラツキ、つまりマウスオーバー時に画像を読み込むまでに何も表示されない瞬間が発生します。

cssで画像をプリロードなどで紹介されている手法を使えば、この『チラツキ』も対処できます。

画像置換は(X)HTML+CSSでサイトを表現する際にかなり重宝します。