IEPNGFIX の Tips 1 改訂版 + バージョンアップ
透過PNG と IE と IE7 まとめや
IEPNGFIX の Tips 1の
コメントでいろいろあったので、負けず嫌いな私は完璧版を模索してみた。。
以下、Version 1.4 でのマウスオーバー対応についてご説明します。
※なお、上位互換なので、マウスオーバー以外は今までのやり方で問題ありません。
コメントでいろいろあったので、負けず嫌いな私は完璧版を模索してみた。。
以下、Version 1.4 でのマウスオーバー対応についてご説明します。
※なお、上位互換なので、マウスオーバー以外は今までのやり方で問題ありません。
１．新しいスクリプトをセットします。
（元々内部でブラウザチェックしてますので、問題ありません。）
<script type="text/javascript" src="iepngfix.js" charset="utf-8"></script>
（元々内部でブラウザチェックしてますので、問題ありません。）
２．関数の呼び出し方法
マウスオーバーしたいオブジェクトと画像URLを引数にして、hover関数をコールする。
マウスオーバーしたいオブジェクトと画像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内でいっぺんに処理する方が綺麗でしょう。
bodyのonloadを使ってhead内でいっぺんに処理する方が綺麗でしょう。
なぜか、今回の場合、behavior: expression(); が上手く動かなかったので、こんな形になっちゃいました。
まだまだ改良の余地というか、Ajaxライブラリを使えばもっとすっきり出来そうですが、
今まで同様、ライブラリを使わずに、iepngfix.js だけで出来る方法にこだわってみました。
実際に使われる際は、いろいろ工夫してみて下さい。
まだまだ改良の余地というか、Ajaxライブラリを使えばもっとすっきり出来そうですが、
今まで同様、ライブラリを使わずに、iepngfix.js だけで出来る方法にこだわってみました。
実際に使われる際は、いろいろ工夫してみて下さい。
あ～あ、昼休みに、ちょっとやってみるだけにしようと思ったら、半日かかっちゃたよ。
とほほ。。。
もしかしたら、IEPNGFIXはそのままで、普通に関数かぶせた方が良かったかも知れん。
というか、hover()の作りがそうだし。。。
とほほ。。。
もしかしたら、IEPNGFIXはそのままで、普通に関数かぶせた方が良かったかも知れん。
というか、hover()の作りがそうだし。。。
Comments
使用する画像を足してゆかないとならないのですね。
一番最初の + AlphaImageLoader が今のところベターという気がします。対応して頂き、どうもありがとうございました。
Posted by: う～ん | April 11, 2007 03:36 AM
ところで、元はこれですか？
http://www.twinhelix.com/css/iepngfix/
Posted by: う～ん | April 11, 2007 10:12 AM
ソースコードのコメントにもある通りベースはiepngfix.htcです。
iepngfix.htcについてはこちら↓を参照してみて下さい。
http://blog.l-xs.com/yungsang/2006/12/png_alpha_filter_ie7.html
もしかしたら、マウスオーバーの場合はiepngfix.htcの方がいいかも知れませんね。
Posted by: ユンサン | April 11, 2007 01:40 PM
参考：IE7 Transparent PNG Implementation ってのはあって、iepngfix.htcはどこどこから……って言うのが無いのは変ではないですか？？
改造されたもののせいで無駄な注文をしてしまっていた事になりますよね。
Posted by: う～ん | April 12, 2007 11:57 AM
iepngfix.htcにソースコードのリンクをつけておいたのですが、
出典を入れるのを忘れていたようです。
追加しておきます。
失礼致しました。
Posted by: ユンサン | April 12, 2007 05:48 PM
せっかくなので、念の為、iepngfix.htcでも試してみましたが、
マウスオーバーは
behavior: url(iepngfix.htc);
を追加するだけでは、動作しないようです。
Posted by: ユンサン | April 12, 2007 08:01 PM