Home > JavaScript > [Javascript]透過PNG画像をIE６で適用させる

[Javascript]透過PNG画像をIE６で適用させる

2009-02-17 (火) 16:37
JavaScript
JavaScript | 画像 | 透過png

通常、IE6以下では透過PNGは使えなくて、透明度を設定した部分はグレーで表示されてしまう。IE独自のフィルター機能は意外とめんどー。
そこで、IE6で透過PNGを使えるようになるにJavascriptのライブラリがあります。

内容は以下です。

■iepngfix.js

ユンサンさんの「iepngfix.js」。元”韓流”プログラマ、ユンサンがつくった「iepngfix.js」ってjsファイルを使った透過PNG処理の方法を紹介です。
これは「iepngfix.htc」ってIEの独自CSS機能を使用した方法です。

[バグは以下のとおり]

・背景に透過PNGを使うと絶対配置を使うとレイアウトが崩れる
・背景画像部分が100%透過してないとリンクが効かなくなる場合がある
・IE6でページを印刷すると適用した部分が真っ黒になって印刷される

【使用方法】
1. iepngfix.jsをダウンロードする
2. htmlの<head>内などに下記を記述して読み込みます。

<script src="iepngfix.js" charset="utf-8" type="text/javascript"></script>

3. CSSに下記を記述(class名,id名は何でも構いません)。

.iepngfix {behavior: expression(IEPNGFIX.fix(this));}

4 HTMLの適用させる部分にclassかidを記述。

[ <img>タグに指定する場合 ]

<img class="iepngfix" src="./sample.png" alt="" />

[ <a>タグの背景で指定する場合 ]

<a class="iepngfix" href="#">テキスト</a>

※注意点は上の方法どちらも画像の幅・高さをちゃんと指定してください。

■alphafilter.js

こちらはto-Rさんで配布されてるjsファイル
個人的にはこれをよく使います。

[バグは以下のとおり]

* スタンドアローン版IE6では、DirectXのからみでアルファ画像は使用できません。
* absoluteやrelativeが指定されているブロックレベル要素ですと挙動がおかしいです。
* 背景画像のリピートに未対応
* 他のieのフィルターとう同時に使用はできません。
* usemap属性を使用したクリッカブルマップには未対応

【使用方法】
1. alphafilter.jsをダウンロードする
2. htmlの<head>内などに下記を記述して読み込みます。

<script src="alphafilter.js" charset="utf-8" type="text/javascript"></script>

3. HTMLの適用させる部分にclassを記述。

[ <img>タグに指定する場合 ]

<img class="alphafilter" src="./sample.png" alt="" />

[ 背景に透過pngを使ってる場合は背景に設定しているブロックレベル要素のclass属性でalphafilterを入れるだけです。 ]

<div class="alphafilter">内容</div>

※注意点は上の方法どちらも画像の幅・高さをちゃんと指定してください。

■Unit PNG Fix

こちらはunitinteractiveという海外のサイトで配布されてるjsファイル

[バグは以下のとおり]

*自分の場合は関係ないPNG画像の位置がずれたり、何かの影響がありました。
なのであまり使っていません。(クラス指定とかないから全体に影響しちゃうのかな…)

【使用方法】
1. unitpngfix.zip”をダウンロードする
2. htmlの<head>内などに下記を記述して読み込み、unitpngfix.jsをアップロード。

<script src="unitpngfix.js" charset="utf-8" type="text/javascript"></script>

3. 1×1の透明GIF画像（clear.gif）をアップロードする。
JSファイル内のパス・ファイル名のデフォルトは「images/clear.gif」で、JSファイル内の1行目でパス・ファイル名を変更できます。
クラス指定とかは必要ありません。

jquery版とCSSだけ版は他記事に掲載します。

■Javascript初心者の方の参考書です。一覧はこちら

Popularity: 76% [?]

タグ: JavaScript, 画像, 透過png

Comments:0

Trackbacks:0

Trackback URL for this entry: http://www.web-milk.com/articles/javascript/javascript%e9%80%8f%e9%81%8epng%e7%94%bb%e5%83%8f%e3%82%92ie%ef%bc%96%e3%81%a7%e9%81%a9%e7%94%a8.html/trackback
Listed below are links to weblogs that reference: [Javascript]透過PNG画像をIE６で適用させる from Webmilk

Home > JavaScript > [Javascript]透過PNG画像をIE６で適用させる