javascriptでロールオーバー時にスムーズに画像が切り替わるやり方をメモ

サンプル

まず、こちらのサイトから
rollover2.jsをダウンロードさせて頂きます。
クロスフェードするロールオーバー処理をお手軽に実装するJavaScript

rollover2.jsの使い方

まず、ダウンロードした「rollover2.js」をhead内で読み込みます。
※UTF-8以外の文字コードのサイトでこのライブラリを利用する際にはcharset=”utf-8″を必ず記述。

<script type="text/javascript" src="js/rollover2.js" charset="utf-8"></script>

あとは、ロールオーバーを適用させたい画像のファイル名を
ロールアウト時:ファイル名_rollout
ロールオーバー時:ファイル名_rollover
にすればOK。

※上記の_rollout等の名前は
rollover2.js内のrollout、_rolloverという箇所を
好きな名前(_off、_on等)に指定すれば変更可能です。

参考サイト

クロスフェードするロールオーバー処理をお手軽に実装するJavaScript