ホーム >  JavaScript >  透過PNGがサポートされていないIE6の対処方法


Posted:2015/01/15 9:00:18 AM|Category : JavaScript

透過PNGがサポートされていないIE6の対処方法

IE6(Internet Explorer6)で透過PNGを対処する方法を紹介します。

透過PNGとは?

透過PNGとは、PNGの機能を用いて画像の一部を透明または半透明にした画像のことです。マイピクチャや一部のグラフィックソフトなどでは、透過部分が白とグレーの市松模様で表示されます。

less0057

しかし、透過PNGは、IE6ではサポートされていません。IE7以降のブラウザで透過PNGを表示すると、透過の部分は背景の色になります。

less0058

IE6では、透過の部分が灰色になってしまいます。

less0059

DD_belatedPNG.jsなどのJavaScriptを利用して対応します。

ダウンロード

①以下の配布元サイトを開きます。

→ Drew Diller’s blog

②最新版の「DD_belatedPNG 0.0.x」と書かれた記事までスクロールします。
例)2015年1月現在では、DD_belatedPNG 0.0.8a releasedと書かれています。

③その記事にあるリンク「http://dillerdesign.com/experiment/DD_belatedPNG/#release0.0.8a」を開きます。

④すると配布用記事の中段辺りに飛ばされます。
少し上にスクロールすると、緑色の四角ボタンがありますので、クリックします。

※「0.0.8a.js」と、「0.0.8a-min.js」ボタンの2つがあります。

  • 前者は通常版で、後者は圧縮版です。
  • 解析する場合は、「0.0.8a.js」(通常版)を選びます。
  • 解析不要な場合は「0.0.8a-min.js」(圧縮版)を選びます。

⑤JavaScriptが表示されます。

  • 右クリックで「このページのソースを表示」をクリックします。
  • 表示されたソースを全てコピーし、新規テキストにペーストして、名前を「DD_belatedPNG.js」として保存します。

コード

DD_belatedPNG.jsを利用してIE6の透過PNGに対処するには、以下のようにコーディングします。

index.htmlにDD_belatedPNG.js読み込み

<!--[if IE 6]>
    <script src="○○○/DD_belatedPNG.js"></script>
    <script>
        DD_belatedPNG.fix('img, .png_bg');
    </script>
<![endif]-->
  • </head>の直前に記述します。
  • 「<!–[if IE 6]>」で、IE6にだけこのスクリプトを実行すると宣言します。
  • 「<script src=”○○○/DD_belatedPNG.js”></script>」で「DD_belatedPNG.js」をリンクします。
  • 「DD_belatedPNG.fix(‘img, .png_bg’);」は、jsを反映させる要素名、id名、クラス名を記入します。

上記の例では、「img要素全て」と「png_bgというクラス名の要素」に対してDD_belatedPNG.jsが動作します。

※DD_belatedPNG.js内部で画像がpng形式かどうかの判別を行っています。

gifやjpgへの影響はありません。

divやpの背景に使用する

#foo {background:url(bg.png) repeat left top;}
<div id="foo" class="png_bg">
    <p>テキストテキストテキスト</p>
</div>
  • 背景にpng画像を指定します。
  • 要素にhead内で設定したクラス名「class=”png_bg”」を記述します。

※1 body・tr・td要素の背景には使えません。

ページ全体にpng画像の背景を設定する場合、全体を<div id=”wrap”></div>などで囲み、背景を設定して下さい。

※2 「background-position:fixed;」には未対応の模様です。

img要素に使用する

#rollover01 {width:○○○px;height:○○○px;}
a#rollover01:link {background:url(mouse_on.png);}
a#rollover01:visited {background:url(mouse_on.png);}
a#rollover01:hover {background:url(mouse_off.png);}
a#rollover01:active {background:url(mouse_off.png);}
<a href="http://○○○.html" id="rollover01" class="png_bg"></a>
  • png画像のimg要素を<a>で囲み、リンクボタンとしてimgタグをロールオーバーする場合注意が必要です。
  • imgタグに「onmouseover=」て指定しても動作しません。
  • ロールオーバーする場合、上記のようにCSSだけでロールオーバーを再現します。

a:link 未訪問リンクのスタイルを指定します。

a:visited 訪問済みリンクのスタイルを指定します。

a:hover カーソルは乗っているがクリックはされていない状態のスタイルを指定します。

a:active クリックされてから離されるまでのスタイルを指定します。

jQueryのフェードイン・アウトを指定しても反応しない仕様です。


トラックバック用のURL
プロフィール

名前:イワサキ ユウタ 職業:システムエンジニア、ウェブマスター、フロントエンドエンジニア 誕生:1986年生まれ 出身:静岡県 特技:ウッドベース 略歴 20

最近の投稿
人気記事
カテゴリー
広告