画像置換

個人的な意見ですが、ボクは画像置換が大好きです。

画像置換とは、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でサイトを表現する際にかなり重宝します。

つぎは画像置換でメニューを作るを紹介します。

関連エントリー

一番簡単な画像置換の方法
cssで画像をプリロードする方法（改

スポンサードリンク

«お引越し | メイン | 画像置換でメニューを作る»