カテゴリ：Javascript関連 2009年2月12日 23:47
今回はサイト製作に便利な JavaScript ライブラリの紹介です。
IE6 では透過 PNG（PNG-24 PNG-32 の間違いでした；）を使えません。
いちおう画像を表示することはできますが、透過部分が反映されません。
しかし、代替処理として「AlphaImageLoader」という CSS の filter を使うことで使うことが可能です。
ですがこれ、ActiveXの問題なのか、指定している透過PNG画像のドメインが違うとうまく反映されませんでした。
しかし今回紹介するJavascriptライブラリは、VMLという技術を使ってPNG画像の透過を実現します。
そのため、ドメインなどの問題もなく、しかも指定も楽でimg要素、CSSともに使用できるためとても便利です。
しかしながら、やはりこちらも使用には何点か注意点があります。
CSSの背景にPNG画像を指定した場合は問題ありませんが、img要素に（つまり通常の画像として）指定した場合、いくつかのライブラリで実装する、フェードアウトやフェードインの視覚的効果が実行されません。
推測では、filter 機能が使えないために透明度が変更できないのだと思います。
なので、もしこのライブラリを使う場合は CSS の背景として使うのが無難です。
簡単にデモを作ってみたので見てみてください。
スクリプトファイルを読み込んだあと、「DD_belatedPNG.fix('.png_bg');」で透過 PNG を使用している要素を指定します。
指定の仕方は簡単で、CSS セレクタと同じように指定ができます。
複数指定する場合は、やはり CSS と同じようにカンマ区切りで列挙します。
合わせて読むと役に立つかもなエントリー
この記事のカテゴリー一覧を見る⇒Javascript関連
トラックバックURL
トラックバック
DD_belatedPNG.js。IE6で透過pngを表示させる決定版！
IE6で透過pngを表示させるためのJavaScriptについて、IE6で背景画像に透過pngを指定してリピートさせるという記事でiepngfixを紹介し...
byチバのブログ 2009年3月14日 13:46
カテゴリー
最近のエントリー
©2009-2011 CSS-EBLOG All Rights Reserved
コメント
1 - よ さん
1 か所気づいたのですが、半透明をサポートしている PNG は PNG-32 (32bit) かと思います。n24 bit はアルファチャンネルなしのフルカラー、8bit は 256 色みたいな感じです
2009年2月23日 20:35
2 - えど
さん
>>1 - よ さんご指摘ありがとうございます。nそうですね、言われている通りPNG-32ですね；nPhotoshopで保存するとき、PNG-24と透明を保持、で書き出しをしているので、透明＝24と思い込んでました；
2009年2月23日 23:42
3 - まさ さん
こんにちは。
この記事を読み、内容の通り作業を行っているのですが、どうしても半透明のpngを読みません。
DD_belatedPNG.js を使用するのに、何かライセンス等必要なのでしょうか？？
自身のいくつかのサーバーへアップしテストしてもダメなのですが、
失礼かと思いましたが、あなた様のDD_belatedPNG.jsを絶対パスで読み込ませると半透明のpngを読みます。
原因が分からず悩んでいるのですが、何か思い当たる節が御座いましたらご指示頂けませんでしょうか？？
お手数お掛け致します。n宜しくお願い致します。
2010年2月 9日 16:17
4 - えど
さん
>>3 - まささん
コメントありがとうございます。
ちょっと状況が分かりかねますが、
こちらのものを読み込んで正常に動く、ということは考えられることとしては、js ファイルが壊れている（どこかでエラーが出ている）か、
そもそも読み込みがされていない、などはないでしょうか？
Firefox の Firebugで見ると、読み込まれているファイルや
ファイルの中身など、色々なことが確認できるので一度そういったものでしっかりと読み込まれているか確認してみてください。
（もともとライブラリとして配布されているものなので、
こちらので動いて、そちらのは動かない、というのは基本的にないと思います）
2010年2月10日 00:12
5 - gen さん
このjsライブラリを使用してclassを指定し、PNG背景指定したDIVの中にPNG画像をいれこむと、中の画像が表示されないという問題があります。他にいいjsなどがあればいいですが・・・・
とりあえず対処法として画像の荒れを無視して中のPNG画像をGIFに置き換えました。
このような問題で頭を抱えている方がいらっしゃったらと思い書き込ませていただきます。
2010年10月21日 12:02