フリーソフト rollover - jQueryプラグイン
rollover について
rollover は当社が開発した、画像ボタン上にマウスカーソルを重ねた際に、ボタンの画像の切り替え（これをロールオーバー[rollover]といいます）を行うjQueryのプラグインです。
まずは、すぐ下のボタンにマウスカーソルを重ねてみてください。
ボタンの色が反転しましたか？（ちなみにクリックしてもどこにもジャンプしません）
もし答えが「はい」なら、あなたはもうこのプラグインの機能のほぼ全てを理解したことになります。
画像ボタンのロールオーバーは、これまでにも様々な形式で実装されていますが、このjQueryプラグインを使用することにより、非常に簡潔なコードでロールオーバーを実現できるようになります。
ダウンロード
以下のリンク先をクリックしファイルを保存してください。
rollover-1.0.zip（25,237byte）
このプラグインの使い方
このプラグインを使用するためには、まず、上のリンクより "rollover-1.0.zip"をダウンロード・展開し、次の２つのファイルを取り出します。
- jquery-1.4.2.min.js
- jquery.rollover-1.0.js
そして、htmlのheadかbodyタグ内に以下の例のように記述をします。最初の２行で、前述の２つのファイルへのパスを指定しています。この例はhtmlファイルと同じ階層に２つのファイルを配置した場合です。
<script type="text/javascript" src="./jquery-1.4.2.min.js"><script>
<script type="text/javascript" src="./jquery.rollover-1.0.js"><script>
<script type="text/javascript">
$(function() {
$(".rollover_button").rollover();
});
</script>
次に、下のような同じサイズの２つのボタンの画像を用意します。この例ではボタンの色が反転したように見えますが、２枚目の画像を変えることにより、ボタンが浮き出たように見せたり、若干位置がずれたように見せたりと様々な視覚効果を得ることが可能です。
２枚目の画像のファイル名は、１枚目の画像のファイル名の拡張子(.png)の前に"_on"を付加したものにしてください。
sample_button.png
sample_button_on.png
次に、以下のようにページ内に画像ボタンを作成します。<img>タグのsrc値は１枚目の画像のものです。そして、<img>タグのクラス名に、上の例内で使用した"rollover_button"を指定します。
<a href="リンク先URL"> <img class="rollover_button" src="img/sample_button.png" /> </a>
これだけで、この画像ボタンはロールオーバーするようになります。２枚目の画像はページの読み込み時に自動的にロード・キャッシュし、初回ロールオーバー時のタイムラグと画像のちらつきを防ぐよう工夫されています。
画像リンクはページ内にいくつでも作成することができます。全て同じクラス名を指定してください。
動作環境
このプラグインは、jQuery 1.4.2での動作を前提に開発を行っています。jQuery 1.4.2で推奨されているブラウザは以下の通りです。
- Microsoft IE 6以上
- Mozilla Firefox 2以上
- Google Chrome 1以上
- Apple Safari 3以上
- Opera 9以上
変更履歴
v1.0 (2010/05/19リリース)
- MITライセンスでのフリーソフト化
- jQuery 1.4.2 にて動作確認
v0.91(200x/xx/xx)
- BUGFIX：ボタンがクリックされた際に、画像が反転したままになるバグを修正
v0.9(200x/xx/xx)
- 非フリーソフトとして開発・使用
ライセンスについて
このプラグインはMITライセンスに則り配布します。よって、どなたでもこのプラグインを無償・無制限で扱えます。再配布や商用での使用も可能です。但し、著作権表示および本許諾表示を、ソフトウェアのすべての複製または重要な部分に記載してください。また、作者はこのプラグインがおこす問題に関してなんら責任を負いません。
詳しくはMITライセンスをご参照ください。
最後にこのプラグインが少しでもあなたのお役に立てば幸いです。
