jQuery.AutomaticRollover Plugin

jquery.AutomaticRolloverプラグインとは

jquery.AutomaticRolloverプラグインはプリロード機能付きロールオーバーを設定無しで実現するプラグインです。
（技術的な話をすると内部的にjQueryを使用しているだけで正式なプラグインではありません。）

jquery.AutomaticRolloverプラグインの使い方は非常に簡単です。
head要素にjQuery本体とjquery.AutomaticRolloverプラグインを読み込むだけです。

<head>
・
・
・
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.automaticRollover.js"></script>
・
・
・
</head>

//あとは画像ファイル名を下記の形式にそって設定するだけです。
  ロールオーバー前　： xxxxx_off.xxx
  ロールオーバー後　： xxxxx_on.xxx

IE7以降を対象とする場合は設定は以上です。

IE6はpngに対応していないので対応させる場合はbelatedPNGライブラリ等を使用します。
belatedPNGの詳しい説明は割愛させていただきます。ソースコード等を参考にして頂ければと思います。

ダウンロード

http://blog.ks-product.com/lib/jquery.automaticRollover/jquery.automaticRollover.zip

表示サンプル

IMG要素適用例

CSS background-imageプロパティ適用例

IE6向け（belatedPNGを使用）IMG要素適用例

belatedPNGをIMG要素に適用した場合、pngは透過されるが、マウスに反応しなくなる。
またbelatedPNGはIE7以降にも適用されるため同様にマウスに反応しなくなる。
基本的にはスクリプトでIE6のみに適用させるか、下記のCSSロールオーバーの方法を使用したほうがよい思います
belatedPNGの仕様上、画像が歪む可能性があることが確認されています。。

belatedPNGついてはhttp://wakuworks.jugem.jp/?eid=153を参考にしてください。

IE6向け（belatedPNGを使用）CSS background-imageプロパティ適用例

ライセンスとサポート

ライセンスはMITライセンスを適用します。
サポートは行っていません。自己責任でお使いください。

ご感想、バグ報告はtwitterアカウントで受け付けています。気が向いたときに修正するかもしれませんｗ