※この記事は「Web制作の現場で使えるjQuery UIデザイン入門」の第18回です。過去の記事もご覧ください。 前回はナビゲーションメニューに「ロールオーバー」効果を付けるスクリプトを作成しました。今回は、Webデザインの幅を広げる透過PNG画像を使ったロールオーバーの作成方法を解説します。透過PNGはInternet Explorer(IE) 6が標準でサポートしていないため、クロスブラウザー対応には工夫が必要です。 今回制作するサンプル 透過PNGに対応したロールオーバーのサンプル。メニュー画像は半透明になっており背景が透けている。IE6を含むクロスブラウザーに対応している(画像クリックでサンプルページを表示します) ロールオーバーの基本部分をおさらい 「透過PNG対応」といっても、IE6以外のブラウザーでは単に透過PNG画像を用意するだけですので、通常のロールオーバーと変わりません