アルファ画像を扱う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(クロスサイトスクリプティング)入門»

このエントリーのトラックバックURL
http://blog.webcreativepark.net/cgi/mt/mt-bt.cgi/1334
トラックバック内容
» 透過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のダウンロードと詳しい解説をされています。
» 透過PNGをIE6以下で表示させる方法 from CSS Lecture
透過PNGを使う方法なんですが、いろいろ紹介されているんですが、自分が検証してみた所。 何かと問題が起こったりするのもあるんですよね... でも[to-R...
コメント

とても便利で使わせていただいてます。

ブロック要素をabsoluteやrelative指定してしまうと、
要素内のリンクを読まなくなってしまうのはどうにもできないのでしょうか?

投稿者:Naoki | 2007年3月19日 10:56

>Naokiさん

いろいろと試してるのですが、なかなかそこが乗り越えれなくて・・・
解決策が見つかったら、また報告します。

投稿者:西畑 | 2007年4月 5日 01:03

あぁやっぱり難しいんですか(^^;
今んとこ画像部分と透明なリンク部分を別に作って、z-indexでリンクを上に持ってくるって形にしちゃってますが。
やっぱり余計なdivは入れたくないですよね。

自分でも考えてみたり、海外のサイト見たりしたんですが、もう頭ぐちゃぐちゃになりそうです……英語が……orz

報告気長に待ってます~(^^;

投稿者:Naoki | 2007年4月 9日 10:29

いつも参考にさせていただいております。

初歩的な質問かもしれませんが、
classで指定せずに、cssファイルのほうに指定することはできますか?
細かい指定をcssでやってしまっているんです。

投稿者:ふなに | 2007年5月28日 20:40

>ふなにさん

背景画像ですと
http://css.webcreativepark.net/tips3/
を参考にしていただいたら透過pngを使用することが可能です。

img要素の透過はimg要素は、透過gifなどで作成して表示したい画像をimg要素の背景画像として先のurlの設定で行えば可能です。(多分

一度試してみてください。

投稿者:西畑 | 2007年5月29日 00:28

どうもありがとうございます。
リンク先の方法を試してみましたが、
背景画像が縦横いっぱいに拡大してしまうので
タイル状に配置するのは無理のようです。
う〜ん、もうちょっと調べてみます。

投稿者:ふなに | 2007年6月11日 21:22

IE6でのPNG表示に困っているときにこちらのサイトに辿り着きました。
とても便利なjsライブラリですね!

早速使わせていただいたのですが、
どうしても不明な点があり今回投稿させていただく次第です。

form全体の背景をPNG画像にしたかったので
<div class="alphafilter">
<form>
<input name="" type="text" />
<input name="" type=゛button" />
</form>
</div>
のようなタグで作成しました。
背景のPNG画像の透過は成功したのですが、フォーム部分の機能が使用不可能になりつまづいています。(IEのみ)

何か回避策はありますでしょうか?
お手数をお掛けしますがアドバイスをいただけたらと思います。
よろしくお願いします。

投稿者:みかん | 2007年6月20日 11:55

IEの他のフィルタとの兼用はできないようですね。たとえばドロップシャドウとか。
もともとフィルタ自体がかさねがけ出来ない仕様のようなのでいたし方がないのでしょうね。

投稿者:un | 2007年7月 4日 13:04

h1〜h6の間に画像を挟むと縦に間延びしてしまいます。
あと、画像を2つ並列で並べる事が出来なくなってしまいますよね・・・

投稿者:しんぷそん | 2007年7月 5日 14:57

>みかんさん

投稿ありがとうございます。
フォーム部品が使えるように修正行いましたのでお試しください。
また、何かありましたらご意見お待ちしておりますのでよろしくお願いします。

>unさん

ご意見ありがとうございます。
そうですね。フィルターを使用している為、フィルターの仕様上できないことに関しては実装の方できません。
なにかよいアイデアがあるとよいのですが・・・

>しんぷそん

コメント、ありがとうございます。
これは実装時の私のミスです。修正したものをアップしておりますのでお試しください。
また、何かありましたらご意見お待ちしておりますのでよろしくお願いします。

投稿者:西畑 | 2007年7月 6日 15:09

background-position を適用することは出来ないでしょうか。

background: url(alpha.png) left bottom no-repeat;

ie6でも背景画像に指定した透過pngの位置を揃えたいのですが。。。

投稿者:yosshi | 2007年7月12日 16:01

>yosshiさん

コメントありがとうございます。
ieのAlphaImageLoaderを使用している為にAlphaImageLoaderができないことはできないんですよ。
(repeatやposition、background-colorの使用etc)

今後の課題ということで。

またなにかありましたらコメントよろしくお願いします。

投稿者:西畑 | 2007年7月13日 22:10

めちゃくちゃ重宝させていたいております。
透明pngでusemap属性をするとリンクが飛ばなくなってしまうんですが、なにか解決策はないでしょうか。。

投稿者:しゅり | 2007年9月28日 12:32

>しゅりさん

返事の方おそくなり申し訳ないです。
色々と調べてみたのですが、usemap属性を使用したクリッカブルマップの対応はできないようです。

引き続き調べてみますが、あまり期待せずにお待ちください。

投稿者:西畑一馬 | 2007年9月28日 12:57

便利なライブラリを作っていただいて、とても感謝しています。

できないことはありますが、あるとないでは全く違ってくるので、これからも使わせてもらいますね!

投稿者:龍一 | 2007年10月 5日 18:04

>龍一さん

ありがとうございます。
これからも色々作っていきますので、よろしくお願いします。

投稿者:西畑一馬 | 2007年10月 6日 11:11

いただきました。
大変助かっております。
ありがとうございました。

投稿者:croquis | 2008年4月 3日 18:41

はじめまして、いつもjavascriptを使わせてもらっています。

今回、pngを使ってロールオーバーをしようとしたのですが、自前で作ったjavascriptと併用できなく困っております…。

下記が自前のロールオーバー用javascriptです。

function initRollovers() {
var src1 = "-out-"; //変更前
var src2 = "-ovar-"; //変更後
if (!document.getElementById) return
var aImages = getElementsByClass('swap');
for (var i = 0; i < aImages.length; i++) {

var osrc = aImages[i].getAttribute('src');
var hsrc = osrc.replace(src1, src2);

aImages[i].setAttribute('hsrc', hsrc);
aImages[i].setAttribute('osrc', osrc);

aImages[i].onmouseover = function() {
this.setAttribute('src',this.getAttribute('hsrc'));
}
var matchOver = aImages[i].src;
var matchOverNull = matchOver.match(src2);
if (matchOverNull == null) {
aImages[i].onmouseout = function() {
this.setAttribute('src',this.getAttribute('osrc'));
}
}
}
}

このスクリプトをwindow.onload時に読み込みを行っております。
IE7、FFなどは通常通り動くのですが、IE6だけロールオーバー用のスクリプトが動作しなくなってしまいます。

何か手立ては無いでしょうか?
身勝手な質問で申し訳ありませんが、よろしくお願い致します…。

投稿者:t,t | 2008年5月13日 11:45

こんにちは。以前に、2008/02/16版で盛り込んでいただいた改善の要望と、このサイトのコメント投稿不具合をメールさせていただいたうちやまです。
その後改善余地を見つけましたので、もしよければ次期に盛り込んでいただけないでしょうか?

alphafilter.jsにYUIcompressorをかけるとエラーになります。
原因を追ったところ、27行目に newimg.style.float = element.align; という箇所がありますが、この「float」が一般的な予約語のため変数宣言と勘違いするのか、「float」を別の名前にするだけでエラーが発生しなくなることがわかりました(たとえば「newimg.style.float2」)。
修正自体は自分で簡単にできるものですが、自分でやってしまうとバージョンアップの度に自分でメンテナンスを要するので、西畑様のほうでこの点を修正したものをリリースいただくことはできますでしょうか。

alphafilter.js単体で見ると別に不具合でもなんでもないので面倒なことを言ってすみませんが、お時間あるときによろしくお願いいたします。

投稿者:うちやまひろかず。 | 2008年5月28日 05:18

度々すみません。うちやまです。
先程の投稿ですが、
> たとえば「newimg.style.float2」
すこし勘違いしていましたね。ちゃんと見ればスタイルとしてのfloatでした。(笑)
なのでただ名前変更で対応するようなことはできなそうでしょうか。現在こちらのYUICompressorは2.3.5ですが、YUICompressor側のバグ?フィックス待ちになるかもしれませんね。失礼いたしました。

投稿者:うちやまひろかず。 | 2008年5月28日 05:26

度々すみません。(笑) うちやまです。
newimg.style[float]でいけるかな思ったのですが、まだYUICompressorがエラーを出します。今度は明確に「識別子は予約語です」というようなことを言ってきますね。
うーん。。

投稿者:うちやまひろかず。 | 2008年5月28日 06:29

>うちやまひろかず。さん

floatの記述をstyleFloatに変更しました。
YUICompressorは使ったことがないので一度検証していただけるとうれしいです。

投稿者:西畑一馬 | 2008年6月 4日 01:46

透過png画像をIE6で表示させるスクリプトを配布して下さって
大変感謝してます。

サイトのメニュー部分を
cssを使ったロールオーバーで作ろうと考えているのですが
FFはできるのにIE6はうまくいかず困っています。

cssで、リストのaタグに画像を背景で指定し、
a:hoverにロールオーバー時の画像を背景で指定しても
IE6ではロールオーバー画像に切り替わりません。

javascriptでのロールオーバーの方法でもできませんでした。
javascriptのソース内で解決可能なことなんでしょうか?
プログラムは苦手で・・・
恐縮ですが何か方法があれば教えて下さい。
お願い致します。


htmlの方はulのliの中のaタグに
class="alphafilter" をつけた状態です。

投稿者:one | 2008年6月 6日 16:57

>oneさん

background positionによるロールーバーとかでも無理ですかね?
ちょっと時間の空いたときに調べてみます。

投稿者:西畑一馬 | 2008年6月18日 03:52

透過pngのフィルターを使用させていただいており
とても重宝しております

質問があるのですが
WinXPのIE6で『情報の更新(F5)』をすると
読み込みが途中で止まってしまいます

自分なりにいろいろ調べてみたのですが
何かわからないでしょうか?

お忙しいとは思いますが
よろしくお願いいたします

投稿者:SHRILL | 2008年7月 8日 14:55

alphafilter.jsとswfobject.js(参考URL:http://webdesignerstips.blog73.fc2.com/blog-entry-8.html)を組み合わせた場合、pngが透過しないという現象で悩んでおります。
何が原因なのかさっぱり分からないので、ご迷惑かと存じますが、ご相談させていただきました。

投稿者:alphafilter.jsとswfobject.js | 2008年7月14日 02:52

大変便利に使わせていただいております。

現在とあるサイトで使わせていただいているのですが、少々厄介なことになっておりまして、質問させていただきます。
alphafilter.jsを読み込んでいるページをIE6で見ると、すべて読み込まれて表示しているにもかかわらず、ステータスバーに「(残り○項目)htp://hoge.net/.../hoge.png をダウンロードしています...」という表示が出たままになっております。
キャッシュが残っていると再現しない場合がありますが、こちらでアップされておられるサンプルでも再現いたします。(複数の環境で再現しました)
この現象が起きていると、他の読み込みjsファイルが動作しなかったりして、困っております。
以前のalphafilter.js(beta5)ではこの現象は起きないのですが、いかんせんbeta5では表示された見た目が問題ありまして;
何か対応策がありますでしょうか?
よろしくお願いいたします。

投稿者:kaza | 2008年9月22日 12:11

ある特定のサイズ以下になると強制的にサイズが変わってしまうようです。
例えば高さ、26pxの画像にたいして適用させると、
高さが36pxぐらいに縦伸びしてしまいます。

投稿者:まりも | 2008年10月 1日 11:21

いつも便利に使わせていただいてます。
現在ie6で印刷時にalphafilter.jsを読み込んでいると一部の要素が消えてしまう現象が起きています。
条件分岐コメントを使用して以下のように読み込みを行っています。

印刷時のみjavascriptを読み込まないなども考えたのですが、方法が見つからず、何か解決策がありましたら、ご教授願います。
どうかよろしくお願い致します。

投稿者:kai | 2008年12月 7日 18:07

こんにちわ、いつも便利に利用させていただいております。

objectタグでYouTubeクリップをページに埋め込むと、その後に記述されるpngファイルに対しては透過が無効になってしまうようです。

投稿者:Koh | 2008年12月26日 18:57

>Kohさん

objectタグの後に透過pngを配置して試してみましたがちゃんと透過されます。
http://blog.webcreativepark.net/sample/js/14/index9.html

他の原因じゃないかなと思います。

投稿者:西畑一馬 | 2008年12月31日 05:25

alphafilter.jsを使用させて頂いております。
とても便利です。
有難うございます。

一つ、ご質問させて頂きたいのですが。
只今、HPを作成しており、リンク要素がある透過png画像(alphafilter.jsを使用)を使用しております。
IE6でブラウザを確認した所その透過png画像にマウスを合わせても指のマークになりません。(マウスが矢印のままです。リンクは出来ます。)

何か記述しなければいけないのでしょうか。


御手数ですが御回答宜しく御願い致します。

投稿者:nk | 2009年2月17日 21:46

>nkさん

ご指摘ありがとうございます。
修正しました。最新のバージョンをダウンロードして一度試していただけたらと思います。

投稿者:西畑一馬 | 2009年2月18日 15:21

コメント、有難うございます。

http://blog.webcreativepark.net/2007/02/01-233315.html

のページでダウンロードしたのですが、変わりません(指のマークになりません)。

何か私の方で記述ミスがあるのでしょうか?

度々御迷惑をお掛けして、誠に申し訳ございません。
宜しく御願い致します。

投稿者:nk | 2009年2月20日 22:00

>nkさん

どのようなhtmlでご利用されているでしょうか?
urlかソースファイルをnishihata[at]to-r.netまでお送りいただけるとこちらで調査・確認が可能なのでよろしければお願いいたします・

投稿者:西畑一馬 | 2009年2月21日 22:35

「現場のプロから学ぶXHTML+CSS」を購入し勉強させて頂いております。大変有益な情報ありがとうございました。

早速で恐縮ですが、お聞きしたいことがあります。
IE6で透過pngを利用するためにalphafilter.jsを導入し、
画像を透過させることには成功しましたが、
画像上のフォームやリンクまだクリックすることができません。
何か思い当たる原因などございますか?

投稿者:shin | 2009年2月25日 19:15

うっかり画像の元データを消した後に、IE6にpngが正しく表示されないと知り困っている所に、こちらを知りました。
さっそく利用させて頂いたところ、見事解決。
助かりました。ありがとうございました。

投稿者:kariera-waka | 2009年3月11日 17:29

上記2008年12月26日にObjectタグの件で質問させていただいたKohです。
回答ありがとうございました。

ご提示いただいたサンプルと比較照合しながらTry&Errorを繰り返した結果、objectタグ中に「type="application/x-shockwave-flash"」を記述しない場合に、その後に配置したpngが透過しないことがわかりました。

当方のサイトのobjectタグに上記属性を記述したところ、問題は解決しました。
ありがとうございました。

投稿者:Koh | 2009年3月18日 18:58

TRANSのあらただったりしますw

いつかお世話になるだろうと思いつつ、ついにお世話になるときが来ました。

ありがとうございます。また関西と関東かで飲みましょう[謎]

投稿者:あらた | 2009年7月18日 21:50

はじめまして。javascript大変使いやすく感謝しております。
ありがとうございます。
そこで1点質問があります。
このjavascriptを使用して、透過PNG画像を表現しようとすると、
vistaのIE7だと画像が一瞬見えて消えてしまうのですが、
何が原因かわかりますでしょうか?

投稿者:nagi | 2009年8月20日 11:21

>あらたさん

ありがとうございます。
是非飲みましょう!!

投稿者:西畑一馬 | 2009年8月22日 12:27

こんにちは。
いつもalphafilter.jsを活用させてもらってます!

先日、 < li >タグの中に、alphafilterを指定しましたところ、
IE7だけ画像が表示されなくなるというバグを発見いたしました。

この不具合の対処方法を教えて頂けたく思います。

宜しくお願い射たいますm(_ _)m

投稿者:tsuki | 2009年8月31日 14:29

縦横幅を指定していないブロック要素にpng背景をno-repeatで使用したところ、ブロック要素の縦横幅に応じて背景画像も伸縮してしまいます。

投稿者:juri | 2009年10月27日 22:07

ご無沙汰です。
サイトリニューアルしてたのですが、IE6のpng問題でこのサイトを見つけました。

どこかで見た名前だなと思えば、西畑大先生じゃないですか。
びっくりしました。

勝手ながら、ありがたく使わせていただいてます!

今後もがんばってください

投稿者:猫の手2代目 | 2009年11月 6日 00:32

>juriさん

現状ではそういう仕様になっております。これは次期バージョンで改善予定ですので少々お待ちください。

投稿者:西畑一馬 | 2009年12月25日 06:58

>猫の手2代目さん

おひさしぶりです。サイト素敵にリニューアルしてますね!
ぜひいちど遊びに行きたいです!

投稿者:西畑一馬 | 2009年12月25日 07:02

ありがとうございます!!
iepngfixより、あっさり使えました。

投稿者:elurra | 2010年7月14日 15:08

ありがたく使用させていただいております。
IE6にてA要素内に使用したところ画像比率がおかしくなったので
33行目、
element.parentNode.style.position="relative";
をコメントアウトして使用しています。今のところ特に問題なく使えています。
感謝!

投稿者:katasaka | 2010年11月15日 19:13

IE9では 
class="alphafilter"
とした.png画像がすべて表示されません。

本来、IE6でしか動かないはずのスクリプトがいたずらをしているようです。

現に
if (navigator.userAgent.indexOf("MSIE")!= -1 && navigator.appVersion.indexOf("6.0")!= -1){
document.write("WAO");
}

で、IE9でも WAO が表示されました。

投稿者:改定 | 2011年4月22日 00:32

>改定さん

ライブラリの読み込み方法に条件付きコメントを追加しましたのでこちらで試してみて下さい。

投稿者:西畑一馬 | 2011年4月22日 12:04

IE9のnavigator.appVersionの文字列に
(compatible; .... Windows NT6.0;...
と"6.0"が入っているので、IE9が反応してしまうようです。

alphafilter.jsは、これまでとても重宝してきましたので、かなりあちこちに、便利に使わせていただいております。

ですので、例えばuserAgentで "MSIE 9.0" をはじくようにすれば、大工事をしなくてすみそうです。

お礼が最後になってしまいましたが、
このような簡潔で有用なjsを開発 公開していただいて
常々、大変感謝しております。
ありがとうございます。

投稿者:昨日のIE9の者です | 2011年4月22日 13:21
コメントを投稿