【研究ノート】jQueryで画像のロールオーバープラグインを実装してみる

公開

jQueryベースで開発している際に画像のロールオーバー機能を取り入れたいことが時々あるのですが、良いプラグインがなく他の優れたライブラリ(MJL)を利用していました。

jQueryを少し触れた経験があれば、画像のロールオーバー機能は.hover()を利用して簡単に書けるものですが、.hover()はマウスイベントのためキーボード操作でフォーカスした際に動作しません(現状、多くのプラグインがそういう仕様です)。

そこで今回、MJL.Rolloverのコードリーディングをしてロジックを学ばせていただきつつ、キーボード操作にも対応した画像ロールオーバープラグインを書いてみました。(GNU GPLに基づく自由ソフトウェアということで問題ないという認識でいますが...、問題がありましたらお知らせください。単にjQuery Pluginに移植したのではなく、派生プログラムといったところですが...。)

サンプル

HTML側はロールオーバーを実現したい要素(もしくは親要素)に、任意のclass属性値(roll等)を付けます。

<ul class="nav-global">
<li><a href="#"><img src="images/gnav_shimalog.gif" width="90" height="37" alt="Shimalog" class="roll" /></a></li>
</ul>

JavaScript側は、次のようにHTML側で付与したclass属性値に対し、プラグインを動作させるメソッドを書くだけでOKです。

"jQuery" in window && (function($) {
 $(function() {
 $(".roll").rollover();
 })
}(jQuery));

開発のポイント

  • 汎用性・カスタマイズ性重視!
  • やはりキーボードのイベントに対応するとなると話がややこしくなります。なぜなら、focus/blurイベントはa要素に、mouseover/mouseoutイベントはimg要素に設定しなければならないからです。
  • ロールオーバーした際の画像のパスは、jQuery.data()を利用して要素に直接格納してみました。コードの簡素化にもつながるかと思います。
  • もちろんIE6~対応しています。Firefox、Safariも最新版では動作しました。

スクリプト例

Gistにも仮掲載しています。IDセレクタやカンマ区切りに複数セレクタにはまだ対応できていません。今後改良します。対応しました。

input要素に対応、複数セレクタに対応するなどのバージョンアップを行い、ソースコード・サンプル一式をGitHubに格納しましたので、そちらをご覧ください。