制作会社から制作会社じゃない会社に転職が決まりました。制作会社で学んだことを残らず記事にしたいと思います。

パンDKOTORI Blogの公式キャラクター「パンD」です。
コーディングHTMLIE6で透過pngを表示できる「DD_belatedPNG.js」

IE6で透過pngを表示できる「DD_belatedPNG.js」

2011年08月18日javascript HTML 
IE6で透過pngを表示できる「DD_belatedPNG.js」記事のアイキャッチ画像

IE6で透過pngを実現してくれる相棒のお話。

まえがき

昔、私がどんなにいろんな事(AlphaImageLoaderとかiepngfix.jsとかie7.jsとか)試しても
IE6に透過pngを表示させることができなかった時期がありました。(本当に原因不明w)
そこから私を救ってくれたのが
「DD_belatedPNG.js」
というjavascriptです。
img要素だろうが背景だろうが全部透過pngで表示してくれます。
IE6で透過pngなんてかなり今更感がありますが
リスペクトの意をこめて、慎ましくエントリーさせていただきます。

DD_belatedPNG.jsの使い方

まず、本体をダウンロードします。

作者様サイト
↑のリンクを開くとコードがでてくると思うので、コード全部コピーしてメモ帳かなんかに貼り付けます。
ファイル名を「DD_belatedPNG.js」にして保存します。

使い方は簡単。
htmlの<head>~</head>内に

<!--[if IE 6]>
<script type="text/javascript" src="jsまでのパス/DD_belatedPNG.js"></script> 
<script type="text/javascript">
DD_belatedPNG.fix('img, .png_bg');
</script>
<![endif]-->

「<!–[if IE 6]>」~「<[endif]>」はIE6だけに読み込ませるタグです。

DD_belatedPNG.fix('img, .png_bg');

これは透過pngを有効にする範囲の設定です。
この場合、「img」タグ全部と「png_bg」と付いたクラスの背景に適用されます。
背景を透過pngで表示したい場合、
背景を指定している「div」かなにかに「class=”png_bg”」をつけてあげればいいということですニャー。

あとがき

KoToRiは思います。
日本で未だにIE6を使っている方は、世のWebデザイナーのために今すぐ爆発してください。キラッ☆

シェアするみんなシェアしてね

フォローするフォローする

いつもKOTORI Blogをご覧いただきありがとうございます。Facebook、Twitterを通じて、皆様と交流していき色んな情報を共有していければな~と思ってます。お気軽に登録してください!

基本フォロー返します。

RSSを登録する

RSSはこちらから。

follow us in feedly

Feedly使ってる人はこちらから。

Buy me a Beer

動く!パンDのLINEスタンプ
好きな人にアプローチスタンプ
パンDのLINEスタンプ

関連する記事関連する記事も読んでみてね

コメント