簡単jsで透過pngのロールオーバーを実現する

かつて透過PNGのIE6対策にはこのJava Scriptというエントリーがあった。
ロールオーバーにも対応している、なかなかよいJavascriptだが、記述がちょっと面倒。
そうこうしているうちに、新しいjavascriptを発見。


IE6でもPNGで透過したいし簡単にロールオーバーさせたい
使用方法は至って簡単。

jquery.js、iepngfix.js、iepngrollover.js ・・という形で読み込み、pngには「class=”png”」、png以外の画像のロールオーバーには「class=”rollover”」、pngのロールオーバーには「class=”png rollover”」とすればOK。

ああ・・なんて簡単なんだ(感涙)。

なお、このスクリプトの場合、ロールオーバー用の画像・overImgの値を書き換えることが出来る。

私の場合はPhotoshopを利用してることもあって「_on」にしている。
現在のサイトはpngロールオーバーを多用していて、htmlがあまり綺麗ではない。これを使ったらすごく綺麗になるので、見つけた時は「やった〜〜」と思ったが、リニューアル案を考え中なので組み込みはしていない(爆)
ただ、請け負った複数の案件には利用していて、なかなか重宝している。

しかし、問題がないわけではない。

実は透過PNGの罠透過PNGの罠の解決法で指摘の通り、「AlphaImageLoaderフィルターを使用した場合、内包するa要素のハイパーリンクが押せなくなる」バグがある。
私もこれが引っかかった。

それも引っかからないものと、引っかかるものと・・まあ、イラつかせてもらった。
解決方法としては、「a要素のposition属性にrelative」を指定することで解決する。
IE6でリンクボタンが押せなくなったらこの方法を試せば解消されます。
あ〜・・早くIE6なくならないかな(笑)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です