UIデザイン入門」の第17回です。過去の記事もご覧ください。ロールオーバーは、画像にマウスカーソルを重ねたときに自動的に別の画像に表示を切り替える効果です。非常にポピュラーなUI表現として、ナビゲーションメニューなどに広く使われています。今回は、ナビゲーションメニューバーを例に、jQueryを利用してロールオーバー効果を設定する方法を紹介します。今回制作するサンプルロールオーバー効果付きメニューバーの完成画面。メニューボタンにマウスカーソルが重なると別の画像を表示する。画像がクリックできることをユーザーに視覚的に伝えられるメリットがある(画像クリックでサンプルページを表示します)ロールオーバーの基本的な仕組みを作ろう最初に、もっとも単純な方法でロールオーバー効果を作成してみましょう。画像(img要素)の上にマウスカーソルが重なると、スクリプトで指定した別の画像に差し替えるロールオーバーです。メニューバーのHTML/XHTML(以下、HTML)は以下のように記述しています。メニュー部分はul/li要素で作成し、li要素の内側にa要素を、その内側にimg要素を記述しています。-->でコメントアウトしているのは、CSSでli要素を横並びにしたときに発生する余分な空白(すき間)を防ぐためです。コメントを入れないと、CSSでdisplay:inlineを設定したときに半角スペース分の空白が表示されてしまいます。/></a></li></ul>CSSは次のようになります。リストを横並びにするため、li要素にdisplay:inlineを設定しています。border:none;}スクリプト部分は次のようになります。})})4つのボタンについて、それぞれjQueryのイベントを設定しています。処理の内容はまったく同じですので、そのうちの1つ、「jQuery」と書かれた画像ボタンを例に解説しましょう。$(this).attr("src","images/javascript.jpg")})セレクター部分では、属性セレクターを利用して、「src属性が『images/javascript.jpg』のimg要素」を指定しています(関連記事)。mouseoverイベントが発生すると、attr()を使ってimg要素のsrc属性をロールオーバー時の画像である「images/javascript_on.jpg」に変更します。mouseoutイベントが発生すると、元の「images/javascript.jpg」に戻すように設定しています(関連記事)。以上の処理をロールオーバー効果を設定したい画像の数だけ繰り返し記述すれば、ロールオーバー効果付きメニューの完成です。一覧へ実務で使えるjQueryプラグイン3選Web制作者のためのjQuery入門。最終回は、現場で使える便利なプラグインを3つ紹介。具体的な使い方もサンプル付きで解説する。制作現場で役立つjQueryプラグインの使い方Web制作者のためのjQuery入門。今回と次回は、制作効率を上げる「jQueryプラグイン」の概要と使い方について解説する。jQueryとAjaxで作るスムーズページングWebデザイナーのためのjQuery入門。jQueryのAjax機能を使ってスムーズなページングを実現する方法をチュートリアルで解説する。jQuery+CSSによるカルーセルパネルの作り方Web制作に活用するjQuery入門。アマゾンでおなじみの「カルーセル」(Carrousel)作り方をチュートリアルで解説する。タイマーを使った改造法付き。jQueryでバリデーション付きメールフォームを作ろうWeb制作者のためのjQuery入門。今回はバリデーション(検証)機能付きの問い合わせフォームの作り方をチュートリアルで解説する。jQueryで自作するフローティングウィンドウドラッグ&ドロップで動かせるフローティングウィンドウをCSS+jQueryで作ってみよう。IE対策のポイントも解説。UIデザイン入門(目次)Webデザイナー、(X)HTML/CSSコーダー、マークアップエンジニアが扱いやすいJavaScriptライブラリー「jQuery」を基礎から解説。プログラムの基本的な書き方から、実務で使えるサンプルまで。jQueryをマスターして仕事の幅をぐっと広げよう。この冬作ろう!jQueryプラグイン講座2008年、最も勢いのあったJavaScript/Ajaxライブラリ「jQuery」。1日1本、簡単なプラグインの作成方法を解説する6日間の集中講座だ。00DESIGNjQueryで作るAmazon流リキッドレイアウトAmazonのようにウィンドウの幅に合わせてコンテンツの表示を変えるようにしたい――難しいリキッド・レイアウトで使えるテクニックにチャンレジしてみよう。00DESIGNjQueryで作る“Amazon風”インターフェイス国内外の商用サイトの優れたUIをお手本にして、なるべくカンタンに、手間も時間もかけずに自分のWebサイトをブラッシュアップしていく方法を紹介する本連載。第4回はAmazon.co.jpの回転式スライドパネル(カルーセル)に挑戦しよう。00DESIGNあのFlashサイトのUIをjQueryで作る海外サイトをお手本に、ページの切り換えをJavaScriptで派手に演出する方法を紹介しよう。スライドする動きもjQeryを使えば手軽に作れる。00DESIGNjQueryアニメ&エフェクト合わせ技で画像を拡大jQueryを使ってWebサイトのブラッシュアップに挑戦。コンテンツの魅力を引き立てるシンプルなWebデザインに、ちょっとした華を添えるアニメーション/エフェクト処理を作ってみよう。00DESIGNjQueryでクールなくるくるウィジェットを作ろうjQueryでかっこよく使いやすいUIを作ろう。今回は、くるくる回るカルーセルをページをめくるナビゲーションに使う方法について。プラグイン「drawer」を紹介します。スマホお気に入り一覧マイページ。