Webの記録

IE6で透過pngを表示してみました♪

投稿日:

この記事は約 3 分で読めます。

IE6対策をいつまですれば良いのかなぁというところですが、まだもう少しIE6を意識してサイトを作ってます。
今回は、IE6ではキレイに表示されない透過pngをキレイに表示する方法にチャレンジしてみました。

いくつかの方法があると思いますが、導入が簡単でMITライセンスの「DD_belatedPNG.js」というJavascriptライブラリを使ってみる事にします。

主な特徴

  • IE6でも透過pngが表示出来る
  • VMLという技術を使っている
  • 似たようなスクリプトのAlphaImageLoaderと比べて高速なので、ページをすぐに表示できる。
  • 導入が楽!
  • MITライセンス
  • 背景リピートに対応
  • img要素に指定した場合、他のライブラリで実装する「フェードイン」「フェードアウト」の視覚的効果が実行されない。

設置方法

DD_belatedPNG.js」をダウンロードします。

headerの記述。

1行目はIE6以下に対しての記述です。
2行目のsrcはDD_belatedPNG.jsのパスを記述します。

<!--[if lte IE 6]>
  	  <script type="text/javascript" src="js/DD_belatedPNG.js"></script>
  	  <script type="text/javascript">
//指定するid、class名を記述する。bodyのidやclass名と一致させる。
	  	DD_belatedPNG.fix('.png_img');
	  </script>
 <![endif]-->

htmlの記述。

適用したい要素に上記で指定したidまたはclassを設定します。

画像の場合
<img src="images/sample.jpg" width="100" height="200" class="png_img" />
背景の場合
<div class="png_img">sample</div>

記述はコレだけです。
DD_belatedPNG.js使用前は、IE6で透過表示されず下記のように画像の周りにグレーの枠が出来てました。

DD_belatedPNG.jsを使う前のIE6での透過png

DD_belatedPNG.jsを使うと・・・とても簡単に透過pngを表示出来ました!!
DD_belatedPNG.jsを使った後のIE6での透過png

-Webの記録
-, , , , ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This blog is kept spam free by WP-SpamFree.

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

レスポンシブ対応ナビゲーションを簡単に付けられる「SlickNav」

この記事は約 1 分で読めます。 レスポンシブサイトで、PCとスマホではメニューの見せ方を変えたいもの。 画面の幅が狭くなった時はハンバーガーボタンと言われる三本線のボタンを表示をすることができる、j …

no image

LIghtBox風画像ギャラリーを「ColorBox」で作ってみた♪

この記事は約 1 分で読めます。LightBoxのように、画像を拡大表示出来るjQueryプラグインを探してみました。 たくさんLightBox風のライブラリはありましたが、今回は「ColorBox」 …

no image

WordPressプラグイン「PhotoDropper」でフリー画像を記事にラクラク挿入♪

この記事は約 1 分で読めます。 photo credit: Remedios205 文字だらけの記事。ちょっと読むのがツライですね。。。 でも、イメージ画像がナイ!そんな時に使えそうなプラグインを探 …

no image

Facebook タイムラインのカバー画像を設定してみた♪

この記事は約 1 分で読めます。 Facebookのタイムラインが登場して、少し経ちます。 カッコイイ画像をカバー画像にされている方もお見かけするのですが、私はまだ画像がしっくり決まらずジタバタしてい …

no image

ムームードメインで取得した独自ドメインをエックスサーバーで使う設定方法

この記事は約 1 分で読めます。「エックスサーバー」を利用する事が決まっていて、ドメインをどこで取得しようかな?と思った時、「エックスドメイン」という選択肢もあったのですが、今回は「ムームードメイン」 …