IE6対応！jQueryで透過PNGのロールオーバーを作る (1/3)
透過PNGに対応したロールオーバーのサンプル。メニュー画像は半透明になっており背景が透けている。IE6を含むクロスブラウザーに対応している（画像クリックでサンプルページを表示します） ロールオーバーの基本部分をおさらい 「透過PNG対応」といっても、IE6以外のブラウザーでは単に透過PNG画像を用意するだけですので、通常のロールオーバーと変わりません。まずは前回のおさらいをかねて、通常のロールオーバーを作成しましょう。以下のようなHTML／XHTML（以下、HTML）を用意します。メニューはul/li要素で記述し、img要素のclass属性には「rollover」を設定します。ここでは、次のような半透明の透過PNG画像を用意し、img要素のsrc属性に指定しています。 ▼サンプル01（HTML部分） <ul> <li><a href="#"><img src="images/jquery.
[mootools] 透過PNGをIE6で自動的に表示させる pingfix.js clone
必要に迫られて作ったIE Pingfix.jsのクローン ページ内にある透過PNG形式画像をIEでも表示させるプラグインのmootools版です。 透過画像やAlphaImageLoaderについてはこっちの記事で詳しく書いてます→透過PNGと透過フィルターの使い方 適用する画像の判別はファイル名で行います。 背景は面倒なので未対応ですが、要素IDによる範囲指定が可能です。 やってる事は大体同じ 透過する画像を取得 画像の属性を取得(width,height,alt,src,class,id等) 新しい要素を作成（このクラスではspan） 作成した要素に画像の属性を当てる Style属性で作った要素をスタイリング（AlphaImageLoaderはここ） img要素を削除またはdisplay:noneにして作成した要素を挿入 Usage このスクリプトはmootools ver1.2のプラ
![[mootools] 透過PNGをIE6で自動的に表示させる pingfix.js clone](https://cdn-ak-scissors.b.st-hatena.com/image/square/8d71ff5111e05619a10d29bb40d7aebaa75c8fbc/height=288;version=1;width=512/https%3A%2F%2Fs0.wp.com%2Fi%2Fblank.jpg)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
