affiliate.ks-product

アフィ収入月10万円以下の初心者を対象に、アフィリエイト、SEO、セールスライティング、マーケティングなどネットで安定して稼ぐ方法を分かりやすくまとめています!関連書籍のレビューも書いています

【JavaScript】画像ロールオーバー ライブラリの決定版!!jQueryCrossFadeRollOverプラグイン

      2015/11/13

2014/04/02
ver 1.3.4 公開しました。プリロードに関するエラーを修正しました。


クロスフェード可能なリッチな画像ロールオーバーをJavaScriptの知識なしで簡単に実装できるjQueryプラグイン「jQueryCrossFadeRollOver」を公開しました。

crossfaderolloverbanner

このライブラリで何ができるの?

画像ロールオーバー効果が少しお洒落になります。それも簡単に。
もちろん従来どおりのベーシックな画像ロールオーバーにも対応しています。

本当に簡単!?

1. jQuery本体の読み込み後にjquery.crossFadeRollOver.jsを読み込みます

<script type="text/javascript" src="[ファイルのまでのパス]/jquery.crossFadeRollOver.js"></script>

2. 任意の場所に下記の内容を記述します。

$(function(){
	$(selector).CrossFadeRollOver(); //selectorには一般的にA要素を指定します
});

ね、簡単でしょ?

これだけだと分かりにくいかもしれないので実際の例をご覧ください。
まずはHTMLから。

<div class="button"><a href="about.html"><img src="img/btn_about_off.gif"></a></div>

そしてJavaScript。

$(function(){
 $(".button a").CrossFadeRollOver();
});

このようにjQueryのお約束を除いてJavaScriptの知識を一切必要としません。
ちなみに1行目と3行目の部分は</body>の直前にスクリプトを記述する場合は不要です。

今まで使ってた画像ロールオーバーライブラリから移行するには?

一般的に画像ロールオーバーライブラリには2タイプあり、タイプごとに移行方法は異なります。

Suffix(接尾辞)に「_off」が付いてる画像を自動的に「_on」が付いてる画像に置換するタイプ

$(function(){
	$("a img[src*='_off.']").CrossFadeRollOver();
});

class名に「rollover」などの名前を指定してその部分をロールオーバーするタイプ

$(function(){
	$(".rollover").CrossFadeRollOver({suffix:{off:"",on:"_o"}});
	//「rollover」、「off , on」の部分は適切なものに差し替えてください。
	//デフォルトのsuffixは「off:"_off",on:"_on"」です。画像の名称に応じて変更してください。
});

その他のアピールポイントは?

柔軟な設定が可能であるということです。
例えばアニメーションの長さをロールオーバー、ロールアウトそれぞれ個別に変更可能です。
プリロードにももちろん対応しています。

また、CSSスプライト(画像置換)でのロールオーバーにも対応しています。CSSスプライトを利用することで無駄な読み込みを減らせるので高速化には欠かせません。CSSスプライトでの利用方法は特設ページをご覧ください。(特別な理由が無い限りはCSSスプライトを利用することをオススメします。理由はこちらの記事をご覧ください)。

動作環境は?

jQuery1.4以上で動作確認しています。
ブラウザはIE7以上で動作を確認していますが、IE8以下はPNGのフェード処理に問題がある為、PNGのフェードアニメーションはカットされます。gif、jpgは他のブラウザ同様アニメーションします。
また、一般的なHTML構造での利用を想定したライブラリです。複雑であったり特殊な構造であると正常に動作しない可能性があります(動作がおかしい場合はzipに含まれているサンプルの構造を参考にしてみてください)。

また、仕様上、ターゲットとなる要素を空にする為、背景画像にデバイステキストを重ねた場合の動作には未対応です。ご注意ください。

レスポンシブWebデザインのサイトに組み込みを考えている方へ

また、今になって気付きましたがトレンドであるレスポンシブWebデザインと相性が悪いです。ボタンが可変するような場合はおそらく動作しないです。当ブログのようなタイプのレスポンシブデザイン(ボタンは固定サイズ)であれば問題なく動作します。

FAQ

想定される不具合をまとめました。参考にしてみてください。

画像の位置が微妙にずれる

内部的にdisplay:inline-blockを指定しているためである可能性が高いです。a要素に対してvertical-alignを指定することで改善されるかも知れません。

レスポンシブデザインに使いたい

画像自体が可変しなければ使用可能です。可変する場合の対応は予定しておりません。

とにかくなんか挙動がおかしい

HTMLやCSSの組み方や他のJSライブラリの影響などで挙動が不安定になる可能性があります。下記の特設ページのサンプルで紹介されている使用方法以外での動作は保証しません。もしよろしければ不具合の症状、再現方法などをコメント欄に投稿してもらえると助かります。

jQueryCrossFadeRollOverの特設ページを作りましたので詳しくはこちらをご覧ください。

crossfaderolloverbanner

Download Files ファイルをダウンロードする

jquery.crossFadeRollOver
従来のロールオーバーからクロスフェードロールオーバーまで対応したjQueryプラグインです。
ライセンス: MITライセンス
必要ファイル: jquery1.4以上
特設ページ: jQueryCrossFadeRollOverプラグイン特設ページはこちら

ご要望・バグ報告はコメント欄へお願いします。
可能な限り対応いたします。
また、「こんなライブラリがあったら便利」といった提案もいただけると嬉しいです。
よろしくお願いします!

 - Web制作テクニック , , , , , , , , ,