透過png。IE７以上が浸透してきたいま、どうしても使用頻度を上げてしまう透過png。
だがしかし、IE6ユーザーの壁は厚い。（かくゆう私も仕事場ではいまだにIE6）
ということで、どうしても使わざるを得ないIE6用Javascript。

私は透過pngを使うアイテムの場所で、使い分けていますので、それをご紹介。
ちなみにどれもかなり、かなぁり有名で。いまさら感たっぷりです。
本日はこちら

装飾用画像などで使う場合（CSSのbackground指定あり）

IE PNG Fix
私が使っているのは「IEPNGFix v2.0 Alpha」未だにBeta版となっていますが、十分動きます。

ダウンロードすると、色々入っているのですが、必要なものは
・iepngfix_tilebg　のJSファイルと
・iepngfix　のHTCファイルと
・blank　のGIFイメージ

以上3つを任意の場所にアップします。
HTMLファイル側で設定するのは「iepngfix_tilebg」JSファイルの読み込みのみ。HTCの読み込みは必要ありません。
たとえばこんな感じ

<script src="js/iepngfix_tilebg.js" type="text/javascript"></script>

上記はｊｓというフォルダの中に格納している場合です。

次にHTCファイルにblank.gifイメージへのリンク先を指定している場所があるので、それを自分がアップした場所に指定し直します。
私の仕事では使うHTMLファイルからの参照が一定ではないので、絶対パスで指定します。
HTCファイルの大体16行目あたりにあると思います。

IEPNGFix.blankImg = 'http://自分のドメイン/images/blank.gif';

上記はimagesというフォルダの中に格納している場合です。

そんで最後、HTCファイルを使用する指定をCSS側に入れます。
たとえばこんな感じに

img {
behavior:url(http://自分のドメイン/js/iepngfix.htc);
}

ここも私は絶対パスで指定します。相対でも問題はないはずです。
imgタグ全体につけると、すべてのimg src="" ・・・・で指定しているイメージが対象になります。
が、これだけではbackgroundで指定しているイメージは対象になっていません。
ということで、IDなりClassなり、background指定で透過pngを使いたい場合はそこにも１つづつ指定していかなければなりません。

#Navigation{
margin:0px;
padding:0;
width:870px;
height:56px;
background:url(../images/navi_bg.png) no-repeat top left;
behavior:url(http://自分のドメイン/js/iepngfix.htc);
}

みたいに。
background-repeatとかpositionとかにも対応しているものなので、使える場面は多いと思います。

次は、ナビゲーションに透過pngを使いたい場合。
マウスオーバーに対応しているJavascriptです。

タグ:, , , ,

関連する投稿