【応用編】ナビゲーション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と同じ

ナビゲーションサンプル

This entry was written by admin , posted on 水曜日 6月 29 2011at 07:06 pm , filed under 応用例 and tagged . Bookmark the permalink . Post a comment below or leave a trackback: Trackback URL.

Comments are closed.