olidStateEveryday - Ajax,javascript,UIサンプルとチュートリアル -

Ajax,Javascriptサンプル、画像表示系の設置方法

  1. Home>
  2. 画像表示>
  3. 画像エフェクト(加工)>
  4. jQueryでIE6でpng画像を使えるようにする

画像エフェクト(加工)jquery.pngFix.js

jQueryでIE6でpng画像を使えるようにする

  • del.icio.us に登録
  • ライブドアクリップに追加
  • Google Bookmarks に追加
  • はてなブックマークに追加
  • Yahoo!ブックマークに登録
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無題ドキュメント</title>
<script src="jquery-1.3.1.min.js" type="text/javascript"></script>
<script src="jquery.pngFix.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function(){ 
        $(document).pngFix(); 
    });
</script>
</head>

<body style="margin:0;">
<div style="height:150px; padding-top:50px; text-align:center; background:#A0D9FA">
<img src="image3.png" />
</div>
</body>
</html>

Webmilk

上記で紹介されてた、jQueryを使用してIE6でpng画像を使えるようにする方法。
詳しい説明はサイトへ行って見てください。
このページでは少し補足的に説明します。 

１．ダウンロード/セッティング

jQueryをダウンロードし、jquery.pngFix.jsもダウンロードします。
それらを適当な場所にアップします。 

２．<head>の設定

アップしたスクリプトを以下のように読み込ませます。

<script src="jquery-1.3.1.min.js" type="text/javascript">
</script><script src="jquery.pngFix.js" type="text/javascript"></script>　

パスは任意で調節してください。
次に、

<script type="text/javascript">
    $(document).ready(function(){
    $(document).pngFix();
    });
</script>　

と記述します。
これで、png画像や背景png画像画像が透過して表示されるようになります。

３．背景にpng画像を使用する場合の注意点

背景にpng画像を使用する場合、すこし気をつけないといけないことがあります。

■繰り返しに対応していない
背景画像の繰り返しには対応していないので、使用方法を工夫してください。

■画像サイズとボックスサイズを合わせる
例えば、height : 100px のボックスに、高さ150pxのpng画像を背景として使用した場合、100pxに圧縮されて表示されてしまいます。
画像とボックスの縦横のサイズをきちんと合わせましょう。 

関連スクリプト

感想

jQueryを使用している場合簡単に実装できるのがいいですね。

スクリプトの使用について

SolidStateEverydayでご紹介しているAjax,Javascript等のスクリプトをご利用になる場合は、必ず製作元のサイトで使用ライセンスを確認してください。ご利用は自己責任でお願い致します。

結局、エックスサーバーなんですよね。