IE6で透過pngを表示させるのにユンサンのiepngfix.jsを良く使います。しかし最近jQueryを使用してサイトを構築するケースが増えたため、jQueryの透過pngをIE6に対応させるプラグインのIE Png fixを試してみました。

使い方は簡単でimg要素のsrc属性を調べ、pngファイルだったら適用させるようにします。

$(function() {
	$("img[src$=png]").pngfix();
});

属性セレクタの後方一致である$を利用して拡張子がpngのファイルすべてに.pngfix()が適用されます。

cssの背景に透過pngを使う場合が多いので.iepngfixと言うクラスにも適用されるように記述しています。

$(function() {
	$("img[src$=png],.iepngfix").pngfix();
}):

iepngfix.jsもIE Png fix.jsも同じような使い方が出来るので、どちらを使うかは好みですね。

昨日某ブログの管理人さんとの飲み会の席で「誰もfixed.jsの事を話題にしないのは何故だ？」なんて事を言われました。

fixed.jsはIE6でposition: fixed;を使う事を可能にするライブラリで、僕の頭の中にはposition: fixed;を使う事自体頭になく特に気にした事はなかったのです。

つい先日Webマニュアル関連のコーディングをする事になった話をし、これ左サイドのナビを固定出来たらな...なんて話をしたら、なんでfixed.jsを使わないんだ！って事を言われました。

早速DLして使ってみると...いやこりゃ結構便利（笑）使わせていただきます！

fixed.js Downloadサイト

上記サイトの最下部moduleのテキストからダウンロード可。headタグ内に

<script type="text/javascript" src="fixed.js" ></script >

と記述をすればOK

class属性を与えるだけで画像のエッジにドロップシャドウやインナーシャドウ、はたまた角丸を与えてくれるJavascriptライブラリcorner.js。

便利なのが角丸+ドロップシャドウ、インナーシャドウ+ドロップシャドウなど複合して使えるところ。

ただ大きな問題がWindows IE6にもIE7にも対応してないところ。けれどもclassを与えるだけなのでサクっと付けたり外したり出来るのは魅力。

corner.js

IE7で正式にサポートされた24bit png。今年はこのpngを使ったサイトが流行しつつあるけど、このアルファチャンネルを持った24bit pngをIE6以前で使うにはアルファイメージローダーというややっこしい記述をする必要があった。しかもアルファイメージローダーを使用した要素内にリンクがあった場合、リンクが効かないという使うには致命的な欠点があった。

しかーし！なんとIE6以前で24bit pngを表示させ、リンクの機能もばっちりのJavascriptライブラリがDesign Walkerさんのブログで配布されてました。

いや〜こういったライブラリは助かりますね〜ありがたく使わせていただきます！

先日のエントリーで個別アーカイブページでLightbox JSが動作しないと書きましたが、いろいろなことが起こるのやすなおさんが教えてくれた小粋空間のエントリーをよーく読んだら解決いたしました（苦笑）

その内容と言うものはbodyに記述されたonloadイベントハンドラがLightbox JSと競合してしまう問題でした。そういえば仕事でLightbox JSを導入したときにonloadと競合したことを思い出しました...てな訳でこれで個別エントリー問題の件は無事解決しました。