IE6で透過PNG表示を可能にするスクリプト考察
も・く・じ
会社のホームページを私が作っているとは言っても完全な自己流であり経験もそれほどないため、何か新しいことを試したりブラウザごとの挙動の違いを調整したりする場合はどうしてもネット情報や書籍に頼らざるをえません。
大方はなんとか解決することが多いんですが「InternetExplorer 6での透過PNG表示」だけが難物でした。
トライしては諦めトライしては諦め繰り返しでしたがようやくこれなら何とかなるだろうとの解決に至ったのでご紹介します。
面倒くさい
IE6（InternetExplorer6）を捨ててしまえば簡単な話なんですが、まだまだIE6で当サイトを見に来る人もいるのでそうも言ってられないって事情もあります。
IE6は私の中で動作検証対象外になったので今や下記のスクリプトにお世話になることはなくなりました。
IE6は完全に切り捨てたんです。
AlphaImageLoader
透明化だけなら「AlphaImageLoader」でも OKです。
しかしどうも背景画像にしか使えないようでしかもリンクがクリックできない、絶対配置もダメらしいので却下しました。
jquery.pngFix.js
次はJQueryのjquery.pngFix.js。
様々なネット情報を集約すると以下のような書き方になります。
|
0 1 2 3 4 5 6 7 8 9 10 |
<!--[if lt IE 7]> <script src="jquery-1.2.6.min.js" type="text/javascript"></script> <script src="jquery.pngFix.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $('#wrap').pngFix(); }); </script> <![endif]--> |
ざっくり説明すると、「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行を足せばいいだけです。
|
0 1 2 |
<script src="IE7.js" type="text/javascript"></script> |
これを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>に下記を記述します。
|
0 1 2 3 4 5 6 7 |
<!--[if lt IE 7]> <script src="(DD_belatedPNG_0.0.8a-min.jsへのパス)"></script> <script> DD_belatedPNG.fix('img, .png_back'); </script> <![endif]--> |
「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」の背景に透過画像を敷きたい場合は下記のように記述します。
|
0 1 2 |
<div id="abc" class="png_back">～</div> |
しかしながらすべての背景画像に有効というわけでもないようです。
以上です。
スポンサーリンク
記事はお役にたてましたか?
記事に興味をもっていただけたらソーシャルボタンでの共有お願いします^^
↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓