画像をロールオーバーさせるjQueryプラグイン「smoothRollOver.js」とjQueryだけの実装を比べてみた。

画像にカーソルを合わせると画像が変わるというという効果を「ロールオーバー」といいます。

メニューやカートに入れるなどのボタンでもよく使われていますね。

画像のロールオーバーはCSSやJavaScript(jQuery)を使用して実装することができますが、「smoothRollOver.js」というjQueryプラグインを使用すると、比較的カンタンに実装できる上にロールオーバー効果をなめらかにすることが出来るようです。

今回は、jQueryのみのロールオーバー時と「smoothRollOver.js」プラグインを利用したロールオーバー時がどの程度違うかを比較するために、実装方法も合わせて説明したいと思います。

まずはサンプルを作ってみました。

1. jQueryでのロールオーバーサンプル

2.「smoothRollOver.js」を利用したロールオーバーサンプル

好みもあると思いますので、好みやデザインに合わせて使い分けたいですね。

それぞれの設定方法は続きをご覧下さい。

まず、jQueryで画像をロールオーバーさせる方法から説明します。これもいろいろな方法があるとは思いますが、わかりやすいと思われる方法で。

準備として、通常時とマウスオーバーさせた時の画像を2枚用意します。

button_on

button_off

<head>部分でjQueryを読み込ませて、以下の設定をします。

画像切替のスピードは、’fast’,’normal’,’slow’でも設定できます。

続いて同じ<head>内にcssを設定します。

そして<body>内に

と記述すれば完成です。

HTMLのimgタグで通常の画像を配置し、CSSで背景画像にマウスオーバー時の画像を指定しています。そしてQueryを使って徐々に透過する動きを加えています。結果、画像が透過されて少しずつ背景画像が現れるという手法です。


それでは、jQueryプラグイン「smoothRollOver.js」の使用方法を説明します。JPEG・GIF・透過PNGに対応しています。

同じく画像を2枚用意します。ここで、重要なことは画像のファイル名を「画像名_on.png」と「画像名_off.png」としておくこと

次に必要なjQueryプラグインをダウンロードしてきます。「smoothRollOver.js」と、透過PNGがInternet Explorerでも問題なく動くように「DD_belatedPNG」というライブラリを併用してあります。

「smoothRollOver.js」のダウンロードページ

「DD_belatedPNG」のダウンロードページ

「DD_belatedPNG」は、通常版と圧縮版がありますがどちらでも利用可能です。保存したファイルは、「DD_belatedPNG.js」とファイル名を変更しておきましょう。IE7対策用ですので、条件付コメントアウトの中に読み込ませてあります。

<head>部分に

と記述して、「smoothRollOver.js」を読み込ませます。IEで枠線を出さないためのcssも設定しています。

そして、<body>内に

と記述するだけです。

マウスオーバーのときの画像の設定がないようですが、自動的に「画像名_on.png」の画像を表示させてくれています。その分記述するコードの量が減りますので、これは便利です。

最後にサンプルのソースを記述しておきます。どうぞご参考まで。

jQueryでのロールオーバーサンプル

jQueryプラグイン「smoothRollOver.js」を利用したロールオーバーサンプル


あわせてお読みください

1 Comment

  1. jQueryのみで制御したほうが綺麗ですね。
    背景画像との関係性からレスポンシブには向かないと思いますが、プラグインの動きよりもすっきりしていて使いやすそうです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です