俺のロールオーバープラグインの凄さをここで知るべき!

rollover

世界中のみなさん、ごきげんよう。「半沢直樹」という楽しみを失ったカイトです。

Web 関連の記事が続きますが、jquery.multirollover.js という画像ロールオーバー効果を実装する jQuery プラグインを作りましたので、ここで紹介したいと思います。
少々長い記事ですが、後半にはお楽しみを用意しておりますので、是非最後までお読みください。

 

ロールオーバー効果とは

rollover の本来の意味は「寝返りを打つ、転がす」ですが、Webサイトなどでは以下のことを言います。

JavaScriptなどによるWebページの表現効果のひとつ。Webページ上の、ロールオーバー効果を設定した画像にマウスポインターを合わせると、自動的に他の画像に変化する。ハイパーリンクが設定されたボタンなどに利用される。

ASCII.jpデジタル用語辞典より

ボタンなどで使われることが多い画像のロールオーバー効果ですが、最近では CSS3 が登場し、プラグインの需要も徐々に減ってきているとは思います。
しかし、まだまだ画像でしか対応できない場面が多く、CSS3 非対応ブラウザの存在や CSS3 のアニメーションで実装する場合の煩雑さなどから、弊社でも様々なプラグインを使って対応してきました。
もちろん大変助けられてきましたが、やはり時には不満を感じることもありました。
これがきっかけとなり、弊社スタッフが抱える不満を解消するため、こちらのプラグインを作成することに至りました。

 

スタッフからの不満

今まで使ってきたプラグインでは以下のような不満がありました。

 

変化後の画像がないと、
カーソルを乗せたときに画像が消えた状態になる

変化後の画像を用意し忘れた場合によく出会う状況ですが、それ以外でも、一括でロールオーバー効果を指定した場合、必要ない箇所があっても、いちいち画像を用意する必要がありました。

 

変化するスピードを制御できない

画像をパッと一瞬で変えるプラグインもあれば、徐々に変化させるものもありますが、その変化のスピードを制御できないものの方が多いような気がします。

 

複数の画像を同時に変化させることができない

需要自体が少ないからというのもあると思いますが、おそらくこの要望に応えてくれるプラグインはほとんどないと思います。そしてこの機能が jquery.multirollover.js の最もの売りであり、「マルチ」という名前の由来でもあります。

 

jquery.multirollover.js を使ってみよう

まずは下記リンクからプラグイン本体をダウロードしてください。

jquery.multirollover.js (ver 1.0)

ダウンロードした zip ファイルを解凍すると、中身はプラグイン本体と使い方が書いてある README のみとなっております。
README は英語となっていますので、分かる方はそちらを読んでいただければと思いますが、一応このブログでは日本語で説明しておきます。

 

0. ライセンスについて

商用・非商用問わず、使用・改造が自由です。ただし、著作権表示は残しておいてください。
MIT と GPL のデュアルライセンスとなっております、お好きな方を選択してください。
詳しく知りたい方は Google 先生に聞いてみてください。
よくわからない方は下記のように使用していただければ基本的には問題ございません。
もし気に入っていただきましたら、この記事をシェアしていただけますと大変嬉しく思います。

 

1. プラグインを読み込む

まずは下記のようにプラグイン本体を HTML ドキュメント内で読み込みます。jQuery プラグインですので、その前に jQuery ライブラリの読み込みもお忘れなく、バージョンは1.7以上をお使いください。

<script type="test/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.multirollover.js"></script>

 

2. HTML のマークアップ

もっともシンプルな使い方としては、下記のようになるかと思います。

<a href="http://example.com" class="hover"><img src="sample-image-1.jpg" /></a>

もし複数の画像を同時に変化させたい場合は下記のようにすべての画像をマウスオーバーする要素(今回の場合は a タグ)でラップしてください。

<a href="http://example.com" class="hover"><img src="sample-image-1.jpg" /><img src="sample-image-2.jpg" /><img src="sample-image-3.jpg" /></a>

class=”hover” はお好みのものに変更できます。

 

3. 画像を用意

次にロールオーバー後の画像を用意し、元画像と同じディレクトリに入れます。
ファイル名は「元画像ファイル名+サフィックス+元画像と同じ拡張子」にしてください。
デフォルトのサフィックスは「-on」ですが、後述するオプションを使用することで、お好みのものに変更できます。
なお、画像サイズは元画像と同サイズにしてください。

例:
sample-image-1-on.jpg
sample-image-3-on.jpg

また、もしロールオーバー後の画像がない場合、元画像は変化しません。例では sample-image-2.jpg にあたります。

 

4. プラグインを起動

上記のように HTML と画像を用意した場合は、下記のようにプラグインを起動させます。

<script>
	$(document).ready(function() {
		$('.hover').multirollover();
	});
</script>

クラス hover 要素にマウスをのせた場合、ロールオーバー画像を用意している要素内の全画像が同時にロールオーバーします。
2.で class=”hover” を変更している場合は $(‘.hover’) もそちらに合わせて変更してください。

 

5. オプション

オプションを使用することにより、サフィックスと変化する速度をお好みのものへ変更できます。

例:サフィックスを「-hover」に、変化する速度を 0.5 秒に変更。

<script>
	$(document).ready(function() {
		$('.hover').multirollover({
			suffix		: '-hover',		// サフィックス
			duration	: 500			// 変化する速度(単位:ミリ秒)
		});
	});
</script>

透過 PNG を使用する場合はクロスフェードオプションを有効にしてください。

<script>
	$(document).ready(function() {
		$('.hover').multirollover({
			crossfade	: true
		});
	});
</script>

 

6. デフォルト値

各オプションのデフォルト値は下記の通りです。

suffix		: '-on',
duration	: 100,
crossfade	: false

 

お楽しみコーナー(DEMO)

男のロマン?

bikini ← マウスホバーでビキニが透けるよ!

 

マルチロールオーバーを使えばこんなこともできちゃいます。

mario1  みんな大好きマリオ  mario2
© NINTENDO

 

最後に

最後まで読んでいただきましてありがとうございます。
こちらのプラグインをお使いの際は是非この記事の「いいね」でも「ツイート」でもしていただけますと大変嬉しく思います。
今後の開発のモチベーションになること間違いなしです。
また、バグなどございましたら、記事下部の Facebook コメント、もしくは README に記載の方法で知らせていただけますと助かります。

世の中には素晴らしい無料ソフトウェアがたくさんあり、僕もこれまで大変お世話になりましたし、これからもいっぱいお世話になると思います。
まだまだ倍返しにはなりませんが、受けた恩を少しずつでも、この Web 業界にお返しできればと思っております。

Three も皆さんの支えによってこれからも精進していきます。

下の Three & Co. Facebook Page の「いいね」ボタンを押して、
Three からのお知らせを受け取ろう!