このページの本文へ

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

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

文●古籏一浩、ASCII.jp

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

jQueryを使ってスクリプトを作成しよう

 HTMLの準備ができたら、いよいよスクリプトの作成に入りましょう。まずは、<script>タグを使ってjQueryライブラリを読み込ませます。

<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>

 次に、自作のスクリプトを組み込みます。今回はHTMLの中に直接、スクリプトを書きます。スクリプトを囲う<script>タグは</body>タグの前に記述します。

 スクリプト内にある$("#photoIndex img")「photoIndex」は、先ほどサムネイル画像全体を囲む<div>につけたID名です。他のID名を指定した場合は、この部分を変更してください。

$("#photoIndex img").hover(
function(){   // マウスオーバー
$("#photoIndex img").fadeTo(0.1, 0.25);
$(this).fadeTo(0.1, 1);
},
function(){   // マウスアウト
$("#photoIndex img").fadeTo(0.1, 1);
}
);

 マウスが重なった時のサムネイル画像の暗さ(不透明度)は、$("#photoIndex img").fadeTo(0.1, 0.25)の「0.25」の値を変えましょう。値は0~1.0までの小数値で、「0」を指定すると完全な透明、「1」を指定すると通常のサムネイル画像が完全に表示されます。

 以上でスクリプトを組み込む作業が完了しました。実際に意図したとおりに動くか、ブラウザーで確認してみましょう。マウスカーソルに合わせて画像が変化するようになりましたか?


完成した作例。マウスをサムネイル画像に重ねるとその画像がハイライトになり、他の画像は暗くなります


 うまく動けば完成です。今回は既存のライブラリに頼らなくても、ベースとなるjQueryだけで手軽に“魅せる”ページを作れました。次回もまた、J-Photo.netをお題に、新しい技を取り込んでいきましょう。どうぞお楽しみに。


(作例デザイン:wataru)
(作例写真:2000ピクセル以上のフリー写真素材集

■もっと勉強したい人のためのオススメBOOK(Amazon.co.jp)

WebクリエイティブのためのDOM Scripting
中村享介 著、毎日コミュニケーションズ刊
Ajaxライブラリリファレンス
古籏一浩 著、ビー・エヌ・エヌ新社刊
CSS&JavaScript表現アイデア帖
エムディーエヌ刊

この連載の記事

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

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

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

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