BIR-もうひとつの画像置換

画像置換が普及し出した頃、一瞬だけ話題になって消えていったテクニックがあります。

それがBIR (Bob Image Replacement)とういうテクニックです。

このテクニックの特筆すべき所は、『CSSがONで画像がOFFの際に何も表示されない』という画像置換の欠点を克服している所にあります。

どのような手法かというと(X)HTMLは以下のようになります。

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

画像で表示、つまり、目立たされる為に画像に置き換える為、em要素で包み込む。
em要素はそれ自体では意味を成さない為、ブロックレベル要素(この場合はp要素)で包む。

ただ、マークアップの説明は後付けで、本当は置き換えたい文字を2つの要素で包めれば良いので、好みでマークアップしてください。

CSSは以下のようになります。

body{
　position:relative;
　z-index:1;
}
p {
　width:400px;
　height:50px;
　background:url("logo.gif") top left no-repeat;
}
p em{
　position:relative;
　z-index:-1;
}

注目するところはz-index:1をbody要素にしている所です。
emに記述されているz-index:-1;で、em要素に記述されている文章をbodyのより下に表示ることが可能になります。

サンプル

ただ、この手法

といった問題点も満載です。

結論

画像置換のデメリットを克服しているとはいえ、他のデメリットが多すぎるテクニックです。表示媒体が限定されている場合などは使えるテクニックかも知れません。
(微妙かな・・・)

予告

実は今回は画像置換5部作としてエントリーをしています。

  1. 画像置換
  2. 画像置換でメニューを作る
  3. 画像置換に関する考え方
  4. BIR-もうひとつの画像置換
  5. 一番簡単な画像置換の方法

という訳で次回は『一番簡単な画像置換の方法』です。

スポンサードリンク

«画像置換に関する考え方 | メイン | 一番簡単な画像置換の方法-imageReplace.js-»