jQueryでIE6を透過PNGに対応させる

インターネットエクスプローラーのバージョン6（IE6）では、透過PNGという半透明の画像をそのまま表示させることができません。通常は画像の背景が灰色で塗りつぶされてしまいます。

しかしIEシリーズにはfilterと呼ばれる独自のメソッドがあり、その中のAlphaImageLoaderを使うとちゃんと透過PNGが表示されます。

ですので、前回のjQueryで作るロールオーバーで作成したメニューを改良して、IE6でも表示できる半透明のメニューを作りました。

注意点はli要素とimg要素にwidthとheightを同じに設定するところです。チュートリアルをちゃんと読んでいなかったがためにこの設定を見逃し、メニューが何も表示されないまま小一時間ほど悩んでしまいました。

ASCII.jp：IE6対応！jQueryで透過PNGのロールオーバーを作る｜Web制作の現場で使えるjQuery　UIデザイン入門を参考に、IE6でも表示できる透過PNGのメニューを作成しました。

季節感無い背景画像でごめんなさい。

#ie6transparent {width:480px;height:360px;background:url("http://www.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;}/**/$(function(){$("#ie6transparent li").css("listStyleType","none");$("#ie6transparent img").css("border","none");});$(function(){$("#ie6transparent img.on").each(function(){$("").attr("src",$(this).attr("src").replace(/^(.+)(\.[a-z]+)$/,"$1_on$2"));});if($.browser.msie && $.browser.version