サンプル ダウンロード

実装方法

1. ロールオーバー時の画像用意する

画像名は通常時の画像ファイル名の末尾に「_on」を付け足した名前にして下さい。
※「_on」の部分はオプションで変更出来ます。

2. 必要なjsファイルを読み込む

headタグ内に以下のscriptタグを記述します。

<script type="text/javascript" src="/labo/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.faderollover.js"></script>

3. 実行する

「2.」で記述したscriptタグの下に以下を記述します。
ここでオプションを指定して、対象とするclass名やフェードエフェクトのスピードを変えることが出来ます。

<script type="text/javascript">
jQuery(function(){
    $.fadeRollover();
});
</script>

4. HTMLの編集

ロールオーバーさせたいimgタグにclass属性に「imgover」を指定します。

<img class="imgover" src="images/btn-sample.gif" width="159" height="55" alt="サンプル">

オプション

ハッシュ名	内容
selector	対象とする要素のセレクタです。頭が「#」だとid名、「.」だとclass名を対象にします。 何も指定しない場合は「.imgover」になります。
attachStr	ロールオーバー時の画像ファイル名の末尾の部分に入る文字列です。 何も指定しない場合は「_on」になります。
fadeTime	フェードエフェクトさせる時間です。（単位：ミリ秒） 何も指定しない場合は「400」になります。

解説

フェードエフェクトの実現方法ですが、対象のimgタグの直前にロールオーバー時の画像を読み込んだImageオブジェクトを追加します。

追加したImageオブジェクトにはcssでposition:absolute;が指定されているので、元のimgタグに丁度重なるように表示されます。

通常時はこのimageオブジェクトのopacityを0にしておき、マウスオーバー時には徐々に1になるようにイベントを設定しています。

注意事項など

jQuery1.4のリファレンスを片手に制作したので、1.3以下で動作するか分かりません。。。

inputタグには対応しておりません。

対象とするimgタグ自体に position:absolute; が設定されている場合、正常に動作しません。

検証済みブラウザ

• ・IE6
• ・IE7
• ・IE8
• ・Firefox3.6
• ・Safari3
• ・Safari5
• ・Google Chrome6

プログラムの実務経験は浅い人なので、ご指導ご鞭撻いただけたら幸いです。