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表現アイデア帖
- エムディーエヌ刊
