アルファ画像を扱うalphafilter.jsライブラリ
【PR】初心者でも安心なレンタルサーバー。２６３円から使えます。
【PR】HP登録でSEO対策！アクセスアップにコチラ！
IE6でアルファ画像(透過png)が使えないことにより、コーディングの作業量が大幅に増します。
そこで、IE6で透過pngを扱うjsライブラリを作ってみました。
設定は簡単head要素内にalphafilter.jsで読み込むだけ。
読み込みを高速化させるためdefer属性をの記述を忘れずに行ってください。
<script type="text/javascript" defer="defer" src="./alphafilter.js"></script>
透過にしたい画像にclass属性でalphafilterと入れるだけで、なんとIE6でも透過画像の使用が可能になります。
<img src="./sample.png" class="alphafilter" alt="" />
背景に透過pngを使ってる場合は背景に設定しているブロックレベル要素のclass属性でalphafilterを入れるだけです。
<p class="alphafilter">内容</p>
あまり検証をしていないのでバグとかあったらコメントとかいただけるとうれしいです。
不具合
- スタンドアローン版IE6では、DirectXのからみでアルファ画像は使用できません。
- absoluteやrelativeが指定されているブロックレベル要素ですと挙動がおかしいです。
- 背景画像のリピートに未対応
- 他のieのフィルターとう同時に使用はできません。
- usemap属性を使用したクリッカブルマップには未対応
修正情報
- 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(クロスサイトスクリプティング)入門»
- このエントリーのトラックバックURL
- http://blog.webcreativepark.net/cgi/mt/mt-bt.cgi/260
- トラックバック内容
-
» 透過PNG と IE と IE7 まとめ
from ユンサンの／융상의／YungSang's
このブログの中で一番アクセスがあるエントリー「透過PNG と IE と IE7」に追記を書いたのですが、解り難そうなので、ここにまとめときます。 以前のエ... -
» JS TIPS - 透過PNGをIEで!!
from SCREAMO
世の中の大半の人が使っているInternet Explore 6（以下IE6）では、透過PNGが透過してくれない。これはアルファチャンネルがIE6では正... -
» PNG24の透過
from X-DAY
画像の拡張子でpngってありますよね？ ピングって読むそうです。 正式にはPortable Network Graphics （ポータブル・ネットワ... -
» IE6で透過PNG画像を扱う
from DOOM! DOOMER!! DOOMEST!?
webページで、背景が透ける画像といえば、透過GIF画像が定番だが、 jpegはそもそも透過の機能がないから、 PNG画像を使いたいんだけど、未だブラウザ... -
» IE6で透過PNGをきれいに表示する方法
from デザイン素材.comのブログ
現在トップシェアのIE6はアルファチャンネルのある透過PNGをサポートしてなくて... -
» IE6で「透過PNG」画像を使用する方法
from エンタメWEB屋さん
こちらでalphafilter.jsのダウンロードと詳しい解説をされています。
西畑一馬(
とても便利で使わせていただいてます。
ブロック要素をabsoluteやrelative指定してしまうと、
要素内のリンクを読まなくなってしまうのはどうにもできないのでしょうか？
＞Naokiさん
いろいろと試してるのですが、なかなかそこが乗り越えれなくて・・・
解決策が見つかったら、また報告します。
あぁやっぱり難しいんですか（＾＾；
今んとこ画像部分と透明なリンク部分を別に作って、z-indexでリンクを上に持ってくるって形にしちゃってますが。
やっぱり余計なdivは入れたくないですよね。
自分でも考えてみたり、海外のサイト見たりしたんですが、もう頭ぐちゃぐちゃになりそうです……英語が……orz
報告気長に待ってます～（＾＾；
いつも参考にさせていただいております。
初歩的な質問かもしれませんが、
classで指定せずに、cssファイルのほうに指定することはできますか？
細かい指定をcssでやってしまっているんです。
＞ふなにさん
背景画像ですと
http://css.webcreativepark.net/tips3/
を参考にしていただいたら透過pngを使用することが可能です。
img要素の透過はimg要素は、透過gifなどで作成して表示したい画像をimg要素の背景画像として先のurlの設定で行えば可能です。(多分
一度試してみてください。
どうもありがとうございます。
リンク先の方法を試してみましたが、
背景画像が縦横いっぱいに拡大してしまうので
タイル状に配置するのは無理のようです。
う〜ん、もうちょっと調べてみます。
IE6でのPNG表示に困っているときにこちらのサイトに辿り着きました。
とても便利なjsライブラリですね！
早速使わせていただいたのですが、
どうしても不明な点があり今回投稿させていただく次第です。
form全体の背景をPNG画像にしたかったので
＜ｄｉｖ ｃｌａｓｓ="ａｌｐｈａｆｉｌｔｅｒ">
＜ｆｏｒｍ＞
＜ｉｎｐｕｔ ｎａｍｅ＝"" ｔｙｐｅ＝"ｔｅｘｔ" ／>
＜ｉｎｐｕｔ ｎａｍｅ＝"" ｔｙｐｅ＝゛ｂｕｔｔｏｎ" ／>
＜／ｆｏｒｍ＞
＜／ｄｉｖ＞
のようなタグで作成しました。
背景のPNG画像の透過は成功したのですが、フォーム部分の機能が使用不可能になりつまづいています。（IEのみ）
何か回避策はありますでしょうか？
お手数をお掛けしますがアドバイスをいただけたらと思います。
よろしくお願いします。
IEの他のフィルタとの兼用はできないようですね。たとえばドロップシャドウとか。
もともとフィルタ自体がかさねがけ出来ない仕様のようなのでいたし方がないのでしょうね。
h1〜h6の間に画像を挟むと縦に間延びしてしまいます。
あと、画像を２つ並列で並べる事が出来なくなってしまいますよね・・・
＞みかんさん
投稿ありがとうございます。
フォーム部品が使えるように修正行いましたのでお試しください。
また、何かありましたらご意見お待ちしておりますのでよろしくお願いします。
＞unさん
ご意見ありがとうございます。
そうですね。フィルターを使用している為、フィルターの仕様上できないことに関しては実装の方できません。
なにかよいアイデアがあるとよいのですが・・・
＞しんぷそん
コメント、ありがとうございます。
これは実装時の私のミスです。修正したものをアップしておりますのでお試しください。
また、何かありましたらご意見お待ちしておりますのでよろしくお願いします。
background-position を適用することは出来ないでしょうか。
background: url(alpha.png) left bottom no-repeat;
ie6でも背景画像に指定した透過pngの位置を揃えたいのですが。。。
＞yosshiさん
コメントありがとうございます。
ieのAlphaImageLoaderを使用している為にAlphaImageLoaderができないことはできないんですよ。
(repeatやposition、background-colorの使用etc)
今後の課題ということで。
またなにかありましたらコメントよろしくお願いします。
めちゃくちゃ重宝させていたいております。
透明pngでusemap属性をするとリンクが飛ばなくなってしまうんですが、なにか解決策はないでしょうか。。
＞しゅりさん
返事の方おそくなり申し訳ないです。
色々と調べてみたのですが、usemap属性を使用したクリッカブルマップの対応はできないようです。
引き続き調べてみますが、あまり期待せずにお待ちください。
便利なライブラリを作っていただいて、とても感謝しています。
できないことはありますが、あるとないでは全く違ってくるので、これからも使わせてもらいますね！
＞龍一さん
ありがとうございます。
これからも色々作っていきますので、よろしくお願いします。
いただきました。
大変助かっております。
ありがとうございました。