使用するライブラリは「jQuery」のみ！

　マウスが重なった画像をハイライトにし、他の画像をグレーアウトにする――。この効果を取り込むのに使うのは、多くのWebサイトで利用されているJavaScript/Ajaxライブラリ「jQuery」だけです。他に使用するライブラリはありません。

　というのも、いつもであれば、同等の効果を実現できる単機能のライブラリを使いますが、今回は使いやすい適当なものが見つからなかったので、jQueryを使って自作することにしたいと思います。“自作”とはといっても、jQueryを使えば数行の記述で済み、あっという間です。

　ではさっそく、jQueryをダウンロードして準備しましょう……と説明を続けたいところですが、前回の連載でjQuery上で動くライブラリ「Photo Slider」を使用しているので、今回、jQueryを新たにダウンロールする必要はありません。前回ダウンロードしたjQueryライブラリファイルをそのまま利用しましょう。初めてダウンロードする場合は関連記事を参照してください。

　今回の作例サイトは、以下のようなスクリプトファイル／スタイルシートファイル／HTMLファイルで構成されています。

ツイートする

この連載の記事

• 第26回  普通のtableタグを1行で動く表にするJSライブラリ
• 第25回  Googleマップ＋jQueryで作るAjaxなデザイン
• 第24回  英国の映像作家も使うJS製LavaLampメニュー
• 第23回  jQueryでクールなくるくるウィジェットを作ろう
• 第22回  Amazonと楽天のアフィリエイトを効率化するjQuery技
• 第21回  意外性が心地よいJSメニューのWebデザイン
• 第20回  jQueryで作るAmazon流リキッドレイアウト
• 第19回  Yahoo！の流れるパネルをJSライブラリで再現
• 第18回  あのFlashサイトのUIをjQueryで作る
• 第17回  JavaScriptでびゅんびゅんスライド！ページ切換法
• この連載の一覧へ

この記事の編集者は以下の記事をオススメしています

• JavaScriptライブラリで作るリッチUI（まとめ）

• 29分でできる！ あのサイトの“技”を盗め

• HTMLもCSSも書換不要！気持ちいいスクロール

• FlashではなくjQueryで！インパクトのあるUIを作ろう

• たった1行で再現する有名ECサイトのUIデザイン

• jQueryで作る“Amazon風”インターフェイス

• asahi.comの開閉パネルをJavaScriptで再現

• 2行＋αでラクになる！フリガナ入力を自動化するJavaScript

• たった6行でWebサイトのUIをガラッと変える

• さらばプルダウン！ 地図で入力できるWebフォーム

• ブロックを一発で揃えるシンプルなJavaScript

• すぐ使える！なめらかアコーディオンで“魅せる”UIに

• エラーでブルブル!! JavaScriptでおもしろフォーム

• 0日目：jQueryプラグイン作成の基礎知識

• 1日目：難しい漢字にふりがなをつけよう

• 2日目：顔文字を顔画像に変換しよう

• 3日目：単語に自動的にリンクを追加しよう

• 4日目：写真の横にGoogleマップを表示しよう

• 【短期集中連載】この冬作ろう！jQueryプラグイン講座

• 最終日：リンク先のサムネイルを自動的に表示しよう

• JavaScriptで飛び出すWebページへ！

• Googleマップ初歩の初歩！静的地図を組み込もう

• Googleマップで探すグルメサイトを作ろう！

• 懐かしの“マーキー”をjQueryでちょいオシャレに！

• jQueryアニメ＆エフェクト合わせ技で画像を拡大

• JavaScriptでびゅんびゅんスライド！ページ切換法

• あのFlashサイトのUIをjQueryで作る

• Yahoo！の流れるパネルをJSライブラリで再現

• jQueryで作るAmazon流リキッドレイアウト

• 意外性が心地よいJSメニューのWebデザイン

• Amazonと楽天のアフィリエイトを効率化するjQuery技

• jQueryでクールなくるくるウィジェットを作ろう

• 英国の映像作家も使うJS製LavaLampメニュー

• 普通のtableタグを1行で動く表にするJSライブラリ

関連記事

• iBooks AuthorでHTML5の電子書籍作ってみた

• HTML5のゲーム開発を効率化！国産ライブラリー

• PhoneGapでiPhoneのコンパスアプリを再現

はてブ注目ランキング

1. 50代でも分かったHTML5の基礎知識730 users

2. 10分でわかる！ jQuery Mobileのキホン98 users

3. iBooks AuthorでHTML5の電子書籍作ってみた76 users

4. HTML5要素のブラウザー実装状況を調べてみた38 users

5. 本店と楽天を使い分け、ブランディングを強化23 users

6. 40分で覚える！jQuery速習講座2213 users

7. 絶対見ておきたい有名企業のスマホサイトまとめ2135 users

8. もう配色には困らない！「Adobe Kuler」1682 users

9. 30分でできる！Webサイトを高速化する6大原則1497 users

10. Web制作会社が作った！超使えるJavaScriptライブラリ1215 users

最新記事

• Xeon搭載で妥協なし！SeaMicro「SM1000-XE」登場の背景

  

• HP、世界初の液晶一体型ワークステーション「HP Z1」を発表

  

• IPv4枯渇から日本を救う！フレッツのIPv6対応の大きな意義

  

• メール誤送信をクラウドで防止！「WISE Attach on Cloud」

  

• 4本アンテナで450Mbps！Cisco Aironet 3600シリーズ