IEPNGFIX の Tips 1
Lyrical Cutie - ニューデザイン構想中や
透過PNG と IE と IE7 まとめのコメントでご質問を頂いたので、ここでまとめておきます。
透過PNG と IE と IE7 まとめのコメントでご質問を頂いたので、ここでまとめておきます。
１．imgタグの画像をマウスオーバーで変更する場合のIEPNGFIXの使い方。
<img src="http://www.isella.com/aod2/images/4/close_btn.png" width="22" height="22" border="0" alt="close" class="iepngfix" onmouseover="this.src='http://www.isella.com/aod2/images/4/close_btn_h.png'; if (typeof IEPNGFIX != 'undefined') IEPNGFIX.fix(this);" onmouseout="this.src='http://www.isella.com/aod2/images/4/close_btn.png'; if (typeof IEPNGFIX != 'undefined') IEPNGFIX.fix(this);" />
２．aタグのバックグラウンド画像をCSSを使ってマウスオーバーで変更する場合のIEPNGFIXの使い方。
<style type="text/css">
a#ipf_test {
display: block;
width: 22px;
height: 22px;
background-image: url(http://www.isella.com/aod2/images/4/close_btn.png);
cursor: pointer;
behavior: expression(IEPNGFIX.fix(this));
}
</style>
<a id="ipf_test" href="#" onmouseover="this.style.backgroundImage='url(http://www.isella.com/aod2/images/4/close_btn_h.png)'; if (typeof IEPNGFIX != 'undefined') IEPNGFIX.fix(this);" onmouseout="this.style.backgroundImage='url(http://www.isella.com/aod2/images/4/close_btn.png)'; if (typeof IEPNGFIX != 'undefined') IEPNGFIX.fix(this);"><span style="display: none;">close</span></a>
という感じで。
だっせー。なんか美しくないなぁ。。。OTL
onmouseover、onmouseout周りを関数にすればもうちょっとすっきりするんだろうけど。
ご質問ありがとうございました。
Comments
ご丁寧にありがとうございます！
無事IE6でも適応できました！！
cursor: pointer;
は盲点でした。。。
Posted by: dol | April 4, 2007 07:52 PM
それは良かったっ！＼(^o^)／
これからもよろしくお願いします。
Posted by: ユンサン | April 4, 2007 09:30 PM
ユンサン様
はじめまして。
いつもブログ拝見させて頂いております！
IEPNGFIX使わせて頂いております。
ひとつご質問なのですが…
CSSを使い、aとa:hoverで半透明pngの背景画像を切り替える下のような場合は、IEPNGFIXをどのように設定したら宜しいのでしょうか。
onmouseoverを使わないのでどうしたらいいのかわからなくて…。
IE6以下でどうしても半透明のpng画像を表示させたいのです(´；ω；`)
ご教授頂けると嬉しいです。
突然失礼致しました。
(XHTML例）
<li class="home"><a href="#"><span>HOME<span></a></li>
（CSS例）
div#glovalnav li.home a{
background-image: url(../image/btn_home.png);
background-position: 0 0;
}
div#glovalnav li.home a:hover{
background-image: url(../image/btn_home.png);
background-position: 0 -38px;
}
Posted by: yuriko | April 9, 2007 07:23 AM
どうもです。
＞onmouseoverを使わないので
JavaScriptで後付けでもいいですか？
jQueryとか使って、
$('div#glovalnav li.home a').hover();
みたいな。
JavaScript無しだと。。。うーん。
出来れば避けたかった、IEPNGFIXの本体に手を入れないといけない感じですねぇ。（機能と負荷と安定性のトレードオフが出てきそうなのでやってなかったんですが。。。）
お時間を下さい。（今忙しいのですぐには無理かも。。。）
検討してみます。
Posted by: ユンサン | April 9, 2007 10:49 AM
yuriko様、
↓こんなんでどうでせうか？
http://blog.l-xs.com/yungsang/2007/04/iepngfix_tips_1_1.html
Posted by: ユンサン | April 10, 2007 07:11 PM
ユンサン様
ご対応いただきまして、本当にありがとうございました！！！
こんなに短時間で…すごいですね。
早速やってみます！
Posted by: yuriko | April 14, 2007 08:19 AM