透過pngをロールオーバーさせる

この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の指定だけでオーケーです。クラスを記述してしまうとロールオーバーしたままになるので要注意。