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


ピックアップ記事

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

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

jQueryのfadeInを使ってみる

2011年06月15日 jQuery・javascript
jQueryのfadeInを使って、適当なdiv要素なんかをfadeInを使ってフェードインさせてみます。 サンプルを設置していますので、動作を確認してみてください。…
「jQueryのfadeInを使ってみる」をはてなブックマークに追加

FireFoxのメニューバーを表示させる

2011年06月04日 web関連
Windowsで、FireFoxのメニューバーを非表示にしてしまうと、再表示させる方法が分かりづらいのでメモ。 解決方法 操作は簡単で、FireFoxを表示中に、「ALT」を押す! 以上です (´ー`) Macの場合は各アプリケーションのメニューは画面の一番上に表示されているので、メニューバーの表示、非表示はいつでも簡単に切り替えられます。…
「FireFoxのメニューバーを表示させる」をはてなブックマークに追加

有名サイトのロゴ フォント

2011年07月27日 web関連
Twitter …… Pico Alphabet (Modified)Digg …… FFF Forward (Modified)Last.fm …… National (Modified)Flickr …… Frutiger BlackYouTube …… Alternate Gothic No. 2Facebook …… Klavika (Modified)Engadget …… Engadg…
「有名サイトのロゴ フォント」をはてなブックマークに追加

safariでowl carouselのスライド時にフォントが細くなる現象の解決策

2015年03月19日 web関連jQuery・javascript
レスポンシブ対応でとても重宝しているowlカルーセルですが、safariでは、スライド時に、フォントが細くなったり、太くなったりして、点滅するような現象が起こっていました。 iOSのchromeでも同じ現象が起こるらしいのですが、未確認。 …
「safariでowl carouselのスライド時にフォントが細くなる現象の解決策」をはてなブックマークに追加
© graffiti on the web . All rights reserved. WordPress Theme by comfy