タグ「png」が付けられているもの

これまでにいくつか透過pngに関するエントリーを書いてきましたが、これは！と思ったのがDD_belatedPNG。background-positionやbackground-repeatにも対応で読み込むJSファイルが1つなのでとっても使いやすい。

IE PNG FixのAlpha版もbackground-repeatに対応しているけれど、リピート用のJSの他にblank.gifや.htcファイルを読み込んだりする必要があるので少々面倒。

DD_belatedPNGの使い方は非常にシンプルで、headタグでJSファイルを読み込んで透過pngを使用したCSSセレクタを指定するだけでオーケーです。

<!--[if lte IE 6]>
<script type="text/javascript" src="<$mt:BlogURL$>theme/js/DD_belatedPNG_0.0.7a-min.js"></script>
<script type="text/javascript">
	DD_belatedPNG.fix('.iepngfix, div#pngFix');
</script>
<![endif]-->

セレクタはカンマ区切りで複数指定出来ます。

今回のブログデザインを変更するにあたりこのJSファイルを使わせていただきました。このブログではjQueryを使ってるので、次のようなコードを書いて透過pngを使った画像にIE6以下のブラウザの場合.iepngfixが自動的に適用されるようにしています。

$(function()
{
	if ($.browser.msie && $.browser.version < 7.0)
	{
		$("img[@src$=png]").addClass("iepngfix");
	}
}

この2〜3日、透過pngを大量に使うデザインのコーディングを行っていましたが、その中で困ったのがIE6で透過pngがロールオーバーしてくれないこと。

様々なライブラリを試したけれどもやっぱりロールオーバーしません。ところが唯一ロールオーバーに対応していたのがユンサンが配布しているiepngfix.jsのバージョン1.4。マウスオーバーさせたいオブジェクトとロールオーバー画像を引数にしてhover関数をコールすると言う使い方をします。

僕の場合はjQueryを使うケースが多いので、外部JSに以下のように書き出して使ってます。

$(function()
{
     var lo_nav1 = document.getElementById('lo_nav1');
     IEPNGFIX.hover(lo_nav1, 'btn_hoge_on.png');
});

ちなみに通常透過pngを使う場合は専用のクラス

* html .iepngfix { behavior: expression(IEPNGFIX.fix(this)); }

のように作っていますが、ロールオーバーさせるオブジェクトにはこのクラスの記述はしません。通常だったら<img src="hoge.gif" class="iepngfix" />みたいな記述をするけれどもロールオーバーさせたい場合は<img src="hoge.gif" id="lo_nav1" />のようにIDの指定だけでオーケーです。クラスを記述してしまうとロールオーバーしたままになるので要注意です。

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も同じような使い方が出来るので、どちらを使うかは好みですね。

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

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

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