2009年12月16日
jQueryでIE6を透過PNGに対応させる
インターネットエクスプローラーのバージョン6（IE6）では、透過PNGという半透明の画像をそのまま表示させることができません。通常は画像の背景が灰色で塗りつぶされてしまいます。
しかしIEシリーズにはfilterと呼ばれる独自のメソッドがあり、その中のAlphaImageLoaderを使うとちゃんと透過PNGが表示されます。
ですので、前回のjQueryで作るロールオーバーで作成したメニューを改良して、IE6でも表示できる半透明のメニューを作りました。
注意点はli要素とimg要素にwidthとheightを同じに設定するところです。チュートリアルをちゃんと読んでいなかったがためにこの設定を見逃し、メニューが何も表示されないまま小一時間ほど悩んでしまいました。
しかしIEシリーズにはfilterと呼ばれる独自のメソッドがあり、その中のAlphaImageLoaderを使うとちゃんと透過PNGが表示されます。
ですので、前回のjQueryで作るロールオーバーで作成したメニューを改良して、IE6でも表示できる半透明のメニューを作りました。
注意点はli要素とimg要素にwidthとheightを同じに設定するところです。チュートリアルをちゃんと読んでいなかったがためにこの設定を見逃し、メニューが何も表示されないまま小一時間ほど悩んでしまいました。
ASCII.jp：IE6対応！jQueryで透過PNGのロールオーバーを作る｜Web制作の現場で使えるjQuery UIデザイン入門を参考に、IE6でも表示できる透過PNGのメニューを作成しました。
季節感無い背景画像でごめんなさい。
コードは以下の通り。
季節感無い背景画像でごめんなさい。
IE6透過PNG対応メニュー
コードは以下の通り。
<style type="text/css">
#ie6transparent {
width:480px;
height:360px;
background:url("//img01.naganoblog.jp/usr/webdesign/wc0011.jpg") no-repeat;
}
#ie6transparent h2 {
margin:10px 0px;
text-indent:1em;
color:#ffffff;
}
#ie6transparent img {
width:100px;
height:40px;
margin:0px;
}
#ie6transparent li {
width:100px;
height:40px;
float:left;
}
/* フロートの背景を確保 */
.clear {
overflow: hidden;
}
.clear:after {
display: block;
clear: both;
height: 0px;
content: "";
}
/*\*/
* html clear {
height: 0px;
overflow: visible;
}
/**/
</style>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#ie6transparent li").css("listStyleType","none");
$("#ie6transparent img").css("border","none");
});
$(function(){
$("#ie6transparent img.on").each(function(){
$("<img>").attr("src",$(this).attr("src").replace(/^(.+)(\.[a-z]+)$/,"$1_on$2"));
});
if($.browser.msie && $.browser.version<7){
$("#ie6transparent img.on").each(function(){
$(this)
.data("src",$(this).attr("src"))
.attr("src","//img01.naganoblog.jp/usr/webdesign/ie6transparent.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')");
});
}else{
$("#ie6transparent img.on").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>
<div id="ie6transparent" class="clear">
<h2>IE6透過PNG対応メニュー</h2>
<ul>
<li><a href="#"><img src="//img01.naganoblog.jp/usr/webdesign/ie6transparent_home.png" alt="home" class="on" /></a></li>
<li><a href="#"><img src="//img01.naganoblog.jp/usr/webdesign/ie6transparent_about.png" alt="about" class="on" /></a></li>
<li><a href="#"><img src="//img01.naganoblog.jp/usr/webdesign/ie6transparent_blog.png" alt="blog" class="on" /></a></li>
<li><a href="#"><img src="//img01.naganoblog.jp/usr/webdesign/ie6transparent_contact.png" alt="contact" class="on" /></a></li>
</ul>
</div>
jQueryで作るロールオーバー
jQueryで作るオリジナルツールチップ
jQueryで作るタブパネル
jQueryで作るアコーディオンパネル
jQueryでイメージギャラリーを作成。
jQueryでストライプの装飾 :nth-child()
jQueryで作るオリジナルツールチップ
jQueryで作るタブパネル
jQueryで作るアコーディオンパネル
jQueryでイメージギャラリーを作成。
jQueryでストライプの装飾 :nth-child()
Posted by ヒダカ at 20:34│Comments(0)
│jQuery
