【応用編】ナビゲーションNo4
画像に透過効果を付けたいとき、PNGファイルを使いますが、
IE6はPNGファイルのアルファ値に対応していません。
しかし、現在使用されているブラウザはIEが最も多く、
IE6もまだ使用されているため、無視するわけにもいきません。
そこで、ユーザーのブラウザがIE6のときだけ、
処理を分岐させ、スタイルシートで透過PNG可能となるようにしましょう。
【jQuery】
<script type=”text/javascript”>
$(function(){
//ロールオーバー時の画像をキャッシュ
$(“img.rollover”).each(function(){
$(“<img>”).attr(“src”,$(this).attr(“src”)
.replace(/^(.+)(\.[a-z]+)$/,”$1_on$2″));
});
//IE6のとき、透過PNGの対処
if($.browser.msie && $.browser.version<7){
$(“img.rollover”).each(function(){
$(this).data(“src”,$(this).attr(“src”)).attr(“src”,”images/transparent.gif”)
.css(“filter”,”progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='”+$(this).data(“src”)+”‘,sizingMethod=’scale’)”);
}).mouseover(function(){
$(this) .css(“filter”,”progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='”+$(this).data(“src”).replace(/^(.+)(\.[a-z]+)$/,”$1_on$2″)
+”‘,sizingMethod=’scale’)”);
}).mouseout(function(){
$(this).css(“filter”,”progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='”+$(this).data(“src”)+”‘,sizingMethod=’scale’)”);
});
//IE6以外のブラウザの場合
}else{
$(“img.rollover”).mouseover(function(){
$(this).attr(“src”,$(this).attr(“src”).replace(/^(.+)(\.[a-z]+)$/,”$1_on$2″));
}).mouseout(function(){
$(this).attr(“src”,$(this).attr(“src”).replace(/^(.+)_on(\.[a-z]+)$/,”$1$2″));
});
}
});
</script>
【HTML】
ナビゲーションNo1と同じ