IE6でも背景やらimgで透過PNG画像を使えるようにする。

PNGとは？

画像にはビットマップ、JPEG、GIF、PNGとフォーマットがいくつかあります。
その中でPNGはJPEG、GIFに代わってウェブ上で使われる事を目的として開発された画像フォーマットです。

PNGはかつてGIFで特許問題が起こった際に、GIF形式のフリーな代替フォーマットとして開発されました。
その為GIFによく似てます。
以下にJPEG、GIF、PNGを特徴分けにしてみました。

• 写真や、写真的なグラデの多い画像の圧縮はJPEGに分があります。PNGだとファイル容量がおおきくなりがち。
• GIFとPNGは似ているがPNGはアニメーションが出来ない。
• GIF、PNG共に透過画像をつくる事が出来るが、PNGのみアルファチャンネルをつかって半透明の画像をつくる事が出来る。

PNGを上手に使うと文字以外の部分が綺麗に透過しているロゴ画像や、半透明で背景をすかしたコンテンツ背景などなど様々な場面で活躍してくれるはずです。

PNGの問題・・・というかまたIE6がやってくれてます。

先に述べた便利な透過PNGちゃんをサポートしていないのがIE6です。
IE6で透過PNGを配置すると、アルファ100％(つまりは透過ナシの部分)のみ表示されて、99％以下の半透明と透明の部分がグレーになってしまいます。
今回はIE6への対応を書いておきます～

iepngfix.jsで透過PNGを使う。

元”韓流”プログラマ、ユンサンがつくった「iepngfix.js」ってjsファイルを使った透過PNG処理の方法を紹介です。
これは「iepngfix.htc」ってIEの独自CSS機能をつかった方法です。
まずはjsファイルをダウンロードして、head内で読み込みましょう。
※ダウンロードページ内のiepngfix.jsってのがダウンロードファイルへのリンクになってます。

<script type="text/javascript" src="./iepngfix.js" charset="utf-8"></script>

んでもってCSSに

.iepngfix {
	behavior: expression(IEPNGFIX.fix(this));
}

これで準備完了です。

imgの場合

<img src="./example.png" class="iepngfix" width="" height="" />

imgのロールオーバーの場合

<img class="iepngfix" src="./example.png" onmouseover="this.src='./example_on.png',IEPNGFIX.fix(this)" onmouseout="this.src='./example.png',IEPNGFIX.fix(this)" width="" height="" alt="画像タイトル">

※imgロールオーバーはユンサンのところで紹介されているものとは違うものを使ってます。

aタグの背景で指定する(:hoverもついでに・・・)。

<a href="#" class="iepngfix">サンプルテキスト</a>

だとして

a	{
	display: block;
	width: 100px;
	height: 100px;
	background: url(./example.png) no-repeat;
}
a:hover	{
	background: url(./example_on.png) no-repeat;
}

こんな感じ。
ただJPEGやGIFと同じように背景で右下に配置したり、gnaviとかであらかじめホーバー画像とセットで縦2倍の画像つくってCSSでつくろうとしたりすると予期せぬ事態がおこります。
あくまで縦横の幅がちゃんと決まったものの中に同サイズのPNGを入れる必要があるので、そこらへんは注意が必要です。

alphafilter.jsで透過PNGを使う。

こちらはto-Rさんで配布されてるjsファイルで以前はprototype.jsとセットで稼動するものだったのですが、バージョンアップによって、なしでも動くようになったとの事です。 まずはjsファイルをダウンロードしてhead内で読み込みましょう。 ※不具合報告や、修正情報の更新などもダウンロードページで見る事が出来ます。

<script type="text/javascript" defer="defer" src="./alphafilter.js"></script>

読み込んだ後は「alphafilter」ってクラス名を対応する要素に追加してあげるだけです。

imgの場合

<img src="./example.png" class="alphafilter" alt="" />

CSSの場合

<a class="alphafilter">サンプルテキスト</a>

jQueryをつかって透過PNGを使う方法「jquery.pngfix.js」

手軽にAjaxを自分のサイトに実装出来るライブラリjsファイル「jQuery」を使った透過PNGの使用方法です。
Emotional Webさんで紹介されてた方法です。

まずはjQueryとjQueryプラグイン「jquery.pngfix.js」をダウンロードしましょう。
そしてはjsファイルをhead内で読み込みましょう。

<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.pngfix.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	// ここにコードを記述します。
</script>

こんな感じ。
さてコードを記述してみましょう。

img要素がPNGだった場合は透過処理を実行する記述

$(document).ready(function() {
$("img[@src$=png]").pngfix();
});

id名、class名を指定してみる

$(document).ready(function() {
$("img[@src$=png], #image-one, .image-two").pngfix();
});;

こんな感じです。

jQueryをつかった透過PNG処理の方法としては
「jquery.pngFix.js」なんてのもあります。

先ほど紹介したEmotional Webさんでは便利なjQueryライブラリがたくさん紹介されています。
興味のある人は一度見てみて損はないですよ＾＾

とまぁここまで色んな方法を書いてみましたが、ご自身でお好みのものを選んでつかってみてください。