スクリプトの組み込みも1行でOK
ロールオーバーの素材が準備できたら、最後にスクリプトを組み込みます。と言っても、rollover2.jsファイルを読み込むだけなので、以下の1行をHTMLに追記します。
<script type="text/javascript" src="js/rollover2.js"></script>
あまりに簡単すぎて気が抜けるかもしれませんね。実際にちゃんと動くかどうか、テストしてみましょう。うまく切り替わらない場合にはファイル名が間違っているか、異なるフォルダに画像が入っている可能性がありますので確認してください（完成した作例）。
完成した作例画像の上にマウスを乗せると画像がフェードしながら切り替わるようになりました
ちなみに画像を切り替えたくない場合は、単純にマウスが重なった時の画像ファイル（「_rollover」）を用意しなければOKです。このあたりも非常にシンプルですね。
rollover2.jsは手軽に使うことができ、多くのブラウザ上で動作するので便利なスクリプトです。うまく使って効果的な演出をしましょう。
次回も、JPhoto.netのギャラリーページに手を入れていきます。お楽しみに。
（作例デザイン：wataru）
（作例写真：2000ピクセル以上のフリー写真素材集）
■もっと勉強したい人のためのオススメBOOK（Amazon.co.jp）
- Webプロフェッショナルのための黄金則 XHTML+CSS虎の巻
- 毎日コミュニケーションズ刊
- JavaScript 中級講座 ~Ajaxを学ぶ前の基礎知識
- 藤本 壱 著、技術評論社刊
- CSS&JavaScript表現アイデア帖
- エムディーエヌ刊
