このページの本文へ

jQueryだけで作る、サムネイル画像を魅力的に見せる方法 (2/5)

2008年11月17日 09時00分更新

文●古籏一浩、ASCII.jp

  • この記事をはてなブックマークに追加
本文印刷

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

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

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

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

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

この連載の記事

一覧へ
Web Professionalトップページバナー

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

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く