１．新しいスクリプトをセットします。
<script type="text/javascript" src="iepngfix.js" charset="utf-8"></script>
※今回は、IEのみではなく、FireFoxやOpera等の他のブラウザでのマウスオーバー処理も一括して行うため、<!--[if IE]><![endif]-->は削除します。
（元々内部でブラウザチェックしてますので、問題ありません。）
２．関数の呼び出し方法
マウスオーバーしたいオブジェクトと画像URLを引数にして、hover関数をコールする。
IEPNGFIX.hover(<DOM Object>, '<マウスオーバーした時の画像URL>');
詳しくは、以下の例を参照して下さい。
例１．imgタグの画像をマウスオーバーで変更する場合
<img id="ipf_test1" src="http://www.isella.com/aod2/images/4/close_btn.png" alt="close" />
<script language="javascript" type="text/javascript">
var ipf_test1 = document.getElementById('ipf_test1');
IEPNGFIX.hover(ipf_test1, 'http://www.isella.com/aod2/images/4/close_btn_h.png');
</script>
例２．aタグのバックグラウンド画像をCSSを使ってマウスオーバーで変更する場合
<style type="text/css">
a#ipf_test2 {
display: block;
width: 22px;
height: 22px;
background-image: url(http://www.isella.com/aod2/images/4/close_btn.png);
}
a#ipf_test2:hover {
background-image: url(http://www.isella.com/aod2/images/4/close_btn_h.png);
}
</style>
<a id="ipf_test2" href="#" title="close"><span style="display: none;">close</span></a>
<script language="javascript" type="text/javascript">
var ipf_test2 = document.getElementById('ipf_test2');
IEPNGFIX.hover(ipf_test2, 'http://www.isella.com/aod2/images/4/close_btn_h.png');
</script>
上記の例では、マウスオーバーしたいオブジェクトの直後にスクリプトを書いていますが、
bodyのonloadを使ってhead内でいっぺんに処理する方が綺麗でしょう。
なぜか、今回の場合、behavior: expression(); が上手く動かなかったので、こんな形になっちゃいました。
まだまだ改良の余地というか、Ajaxライブラリを使えばもっとすっきり出来そうですが、
今まで同様、ライブラリを使わずに、iepngfix.js だけで出来る方法にこだわってみました。
実際に使われる際は、いろいろ工夫してみて下さい。
Continue reading "IEPNGFIX の Tips 1 改訂版 + バージョンアップ" »
