2012年02月14日 web関連jQuery・javascript

DD_belatedPNG

先日、でも触れましたが、DD_belatedPNGというjavascriptを使って、IE6で透過pngを表示させてみました。

DD_belatedPNGの入手

以下のサイトにいって、DD_belatedPNGをダウンロードします。以下のサイト内を下へスクロールしていくと、左のサイドバーにDD_belatedPNG 0.0.8a releasedというリンクがありますので、そこをクリックします。

Drew Diller’s blog

DD_belatedPNGの設置方法

ダウンロードしたファイルをサーバにアップして、以下のコードをhtmlファイルに設置します。
<!-- IE6を透過png対応させる -->
<!--[if IE 6]>
    <script type="text/javascript" src="js/DD_belatedPNG_0.0.8a-min.js"></script>
	<script>
		DD_belatedPNG.fix('img, .wrap980 h1 a');
	</script>
<![endif]-->

「if IE…」というのは、IE6の場合に以下のスクリプトを読み込む設定です。

上記のコードでは、imgタグ全てと、wrap980クラス内のh1のaタグが指定されています。
後者はサイトロゴの背景にpng画像を設置していたので、こういう書き方にしています。

普通に配置されているimg画像やCSSで背景に画像が設置されている場合は、上記のやり方で問題ありませんが、body・tr・td要素の背景には使えないなど、いくつか注意する点もあるようなので、もう少し情報が必要な方は以下のページが詳しく説明してくれていますので、参考にしてみてください。

この投稿へのコメント

コメントはまだありません。

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます。
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

CAPTCHA


ピックアップ記事

WordPressのサムネイルのサイズ指定を削除

2013年11月10日 web関連WordPressphp
WordPressのテーマ内で、the_post_thumbnailで記事のアイキャッチを表示させる際に、width,heightがimgタグ内で設定されていますが、それを消す方法です。 レスポンシブウェブデザインをする際には、ハードコーディングは外したほうがいいかもしれませんね。 functions.php内に以下を記述 [php]//サムネイルのサイズ指定削除 add_fi…
「WordPressのサムネイルのサイズ指定を削除」をはてなブックマークに追加

jQuery.autopagerプラグインで読み込まれるページにも他のjQueryを適用する

2012年02月02日 jQuery・javascript
jQuery.autopagerを使っていると追加で読み込まれたページのDOMには、headなどで指定しているjavascriptは機能しません。 それを解決するには、autopagerの設定項目の「start」で以下のように設定します。 以下のサンプルコードでは、他のプラグイン(autoheight,smartrolloverなど)が動作するように設定しています。 サンプルコード [ph…
「jQuery.autopagerプラグインで読み込まれるページにも他のjQueryを適用する」をはてなブックマークに追加

Twitter API を使わずにプロフィール画像を取得する

2011年07月29日 web関連twitter API
Twitter APIを使っていると、プロフィール画像の取得だけで、さくさく利用限度が減って行きます。 公式のAPIを使わず、もっと簡単に画像を取得出来る方法があるようなので、ご紹介。 …
「Twitter API を使わずにプロフィール画像を取得する」をはてなブックマークに追加

Twitter for Mac’s developer consoleの設定

2014年07月18日 web関連twitter API
Twitter for Mac’s developer consoleの設定
ちょうど設定してみたので、メモ。 まだ触ってないので詳しく分かりませんが、Twitter for Mac's developer consoleというのは、Twitter APIのテストが可能なのようです。 WEB版のコンソールもありますが、Twitter for Mac's developer consoleの方がサクサク動くらしいです。 DEVサイトにログイン、APP登録 まず…
「Twitter for Mac’s developer consoleの設定」をはてなブックマークに追加

レスポンシブ対応 画像メニューをテキスト表示に切り替える

2014年11月15日 web関連HTML5・CSS3
レスポンシブなサイトを作るときに、大きな画面では画像メニュー、スマホなどのサイズでは、テキストメニューにして、メニューボタンに格納したい場合など、画像メニューからテキストメニューにCSSで表示切り替えする方法。 cssの:before attr属性で解決 html [php]<ul id="nav"> <li><a data-tex…
「レスポンシブ対応 画像メニューをテキスト表示に切り替える」をはてなブックマークに追加
© graffiti on the web . All rights reserved. WordPress Theme by comfy