アルファ画像を扱うalphafilter.jsライブラリ

IE6でアルファ画像(透過png)が使えないことにより、コーディングの作業量が大幅に増します。
そこで、IE6で透過pngを扱うjsライブラリを作ってみました。

設定は簡単、head要素内に条件付きコメントを利用してalphafilter.jsで読み込むだけ。
読み込みを高速化させるためdefer属性をの記述を忘れずに行ってください。

<!--[if lte IE 6 ]><script type="text/javascript" defer="defer" src="./alphafilter.js"></script><![endif]-->

透過にしたい画像にclass属性でalphafilterと入れるだけで、なんとIE6でも透過画像の使用が可能になります。

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

背景に透過pngを使ってる場合は背景に設定しているブロックレベル要素のclass属性でalphafilterを入れるだけです。

<p class="alphafilter">内容</p>

サンプル

あまり検証をしていないのでバグとかあったらコメントとかいただけるとうれしいです。

透過pngに対応したロールオーバー機能

img要素の場合class属性に「btn」と付ければロールオーバーの処理を行います。
(IE6のみではなく、すべてのブラウザで)

<img src="./sample.png" class="btn" alt="" />

sample.pngの場合はsample_on.pngのように拡張子の前に「_on」が付いた画像をロールオーバー時に表示します。

alphafilterと同時に利用することも可能です。

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

不具合

修正情報

関連エントリー

一番簡単な画像置換の方法-imageReplace.js-
IEとそれ以外のブラウザでアルファ画像を使う方法
IE6とIE7で検証する方法
AjaxやJavaScriptのライブラリー

スポンサードリンク

«robots.txt.Makerリリースのお知らせ | メイン | WEBデザイナーの為のXSS(クロスサイトスクリプティング)入門»