loading
 読み込み中...
ウェブの触手-日々の生活に新たなスパイスを-
Home > [ウェブデザイン] > IE6で透過PNG表示を可能にするスクリプト考察
この記事は約4分で読めます。
この記事は最終更新日から5年以上経過しているため現状にそぐわない可能性もあります。

IE6で透過PNG表示を可能にするスクリプト考察

投稿日:2009.8.29

会社のホームページを私が作っているとは言っても完全な自己流であり
経験もそれほどないため、
何か新しいことを試したりブラウザごとの挙動の違いを調整したりする場合は
どうしてもネット情報や書籍に頼らざるをえません。

大方はなんとか解決することが多いんですが
「InternetExplorer 6での透過 PNG表示」だけが難物でした。

トライしては諦め、トライしては諦め繰り返しでしたが
ようやくこれなら何とかなるだろうとの解決に至ったのでご紹介します。

↓↓↓簡単にサイトが作れる次世代ツール↓↓↓

SIRIUSレビューイメージ画像

面倒くさい

IE6(InternetExplorer6)を捨ててしまえば簡単な話なんですが
まだまだ IE6で当サイトを見に来る人もいるので
そうも言ってられないって事情もあります。

追記 -2012.3.3-

IE6は私の中で動作検証対象外になったので今や下記のスクリプトにお世話になることはなくなりました。。。そう IE6は完全に切り捨てたんです。

 

スポンサーリンク

AlphaImageLoader

透明化だけなら「AlphaImageLoader」でも OKです。
しかしどうも背景画像にしか使えないようで
しかもリンクがクリックできない絶対配置もダメらしいので却下しました。

 

jquery.pngFix.js

次は JQueryの jquery.pngFix.js
様々なネット情報を集約すると以下のような書き方になります。

ざっくり説明すると、
「IE6のとき srcで読み込む画像の拡張子が.pngなら IE6のみ透明化を有効にする」
という意味のようで、
”#wrap”は PNG画像を含んでいる当該 idに置き換える必要があります。

 

結果としては見事にアルファチャンネルが透明化されました。

しかしながら 2つ目、3つ目の画像を imgタグで続けて書き、
それぞれの画像が若干重なるように CSSで絶対配置にしてみると、
IE8/FireFox/Opera/Safari では問題なく配置されるも
IE6で見ると、画像が完全な横並びになってしまうんです。

つまり絶対配置が無効化されて
HTMLで書いた順に画像が並べられてしまっているんです。
ただし透明化はOK。ただ画像が重なってないだけ。

そこで今度は組み込んだコードを全部消し去ってやってみたところ
透明化は元に戻ってしまいましたが、
画像が若干重なっての絶対配置は見事に再現されていました。

結果として複数画像の絶対配置は使えないようです。

 

ie7-js

次は Googleコードの「ie7-js」です。
早速ダウンロード。
(※直接読み込むことも可能らしいです)

書き方は jQueryを読み込んだ後に次の 1行を足せばいいだけです。

これを IE6で見たところ、
絶対配置も OK で画像も見事に透明化されていましたよ。

ただし 1ピクセルの透明画像「blank.gif」をどこからか持ってきて
「ie7.js」と同じ階層に置かないと
IE6では画像が正常に読み込まれないことが後ほど判明しました。

こういったことは素人にはわかりにくく、解決するまでに 2日もかかっちゃいました。

それと PNG画像はファイル名の最後を「sample-trans.png」のように
必ず「-trans」を付ける必要があります。

これは想像以上に面倒でした。

それに実際にホームページを開いてみると
IE6で画像が透過されるまでのタイムラグがちょっと長く(1~2秒)
透明化対策を行ってない時に露出するグレーの部分が
明示的に表示されてしまうのがとても気になります。

 

DD_belatedPNG

最後は DD_belatedPNGです。

ちょっとクセはあるものの、これが一番実用的ではありましたね。

まずは配布元から「DD_belatedPNG_0.0.8a-min.js」をダウンロードします。

次に<head>~</head>に下記を記述します。

「DD_belatedPNG.fix(‘img, .png_back’);」の部分は
使用する画像が多いときは PNG画像すべてに適用するという意味の
「DD_belatedPNG.fix(‘img’);」にしてもいいらしいんですが
こちらは動作未検証です。

結果は IE6で見事にイメージ通りに表示されました。

また透明度を設定した PNG画像でも、
動きのある java script が絡んでいたとしても問題なく動作しましたよ。

現時点ではすばらしいスクリプトです。

’img’の部分はすべての img要素の PNG画像に有効という意味で、別の要素にも変更可能らしいですが検証はしていません。

次の「.png_back」の部分は、背景画像に PNG画像を指定した場合、その部分に「png_back」のクラス名を付加すると IE6でも透過背景画像が機能するというもの。
クラス名は適時変更のこと。

例えば idが「abc」という「div」の背景に透過画像を敷きたい場合は
下記のように記述します。

しかしながらすべての背景画像に有効というわけでもないようです。

以上です。

参考サイト

記事はお役にたてましたか?

記事にご興味をもっていただけましたら
下のソーシャルボタンで共有していただけると嬉しいです^^

 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

スポンサーリンク

おススメTCDテーマ

WordPressテーマ「CORE (TCD027)」

コメント(0件)

コメントをどうぞ

入力いただいたメールアドレスは公開されません。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

先頭へ