アルファ画像を扱う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="" />
不具合
- スタンドアローン版IE6では、DirectXのからみでアルファ画像は使用できません。
- absoluteやrelativeが指定されているブロックレベル要素ですと挙動がおかしいです。
- 背景画像のリピートに未対応
- 他のieのフィルターとう同時に使用はできません。
- usemap属性を使用したクリッカブルマップには未対応
修正情報
- 2011/04/22 条件付きコメントによる読み込みを追加
- 2009/05/29 ロールオーバー機能の追加
- 2009/04/16 firefox3でエラーが出る現象を解消
- 2009/03/3 a要素のカーソルがポインタに変更しないバグについてさらに修正しました。
- 2009/03/3 画像が再読み込みの際に読み込みが完了しないバグについてさらに修正しました。
- 2009/02/18 a要素のカーソルがポインタに変更しないバグについて修正しました。
- 2009/02/18 画像が再読み込みの際に読み込みが完了しないバグについて修正しました。
- 2008/02/16 defer属性に対応。
- 2007/08/20 img要素のCSSが適用されないバグについて修正しました。
- 2007/07/06 img要素の返還後のdisplayプロパティをblock→inline-blockに変更しました。
- 2007/07/06 透過png上のフォームの部品が動作しないバグを修正しました。
- 2007/06/15 prototype.jsなしで動くように修正しました。
- 2007/06/15 オブジェクトの汚染を回避しました。
- 2007/02/09 align属性に対応しました。
- 2007/02/09 a要素に対応しました。
- 2007/02/09 ライセンス形態をMITライセンスに変更
関連エントリー
一番簡単な画像置換の方法-imageReplace.js-
IEとそれ以外のブラウザでアルファ画像を使う方法
IE6とIE7で検証する方法
AjaxやJavaScriptのライブラリー
スポンサードリンク
«robots.txt.Makerリリースのお知らせ | メイン | WEBデザイナーの為のXSS(クロスサイトスクリプティング)入門»