Rewish

ウェブデザイン、HTML、CSS、JavaScript、PHP、WordPress、Movable Typeなど、Web制作で役立つかも知れないBlog.

Search

Entry Search

input要素にも使えるjQueryのロールオーバープラグイン

カテゴリー
JavaScript
タグ
jQuery, Plugin, Rollover

以前 jQueryだけで画像のロールオーバーを実装する方法 で紹介したロールオーバーを、より簡単に使えるようにプラグイン化しました。

jQueryプラグインの習作をするために作成したモノではありますが、プラグイン化したことでかなり楽に使えるようになったので、気が向いたら使ってみてください。

ダウンロード

jquery.rollover.js - v1.0.4

概要

HTMLを汚さず、簡単に画像のロールオーバーを実装できます。

主な機能

  • HTMLで指定するのは初期表示の画像だけ
  • 指定された箇所でも _on が付いている画像は無視
  • ロールオーバー画像をプリロード
  • 拡張子は何でもOK (png, jpg, jpeg, gif, etc...)
  • ロールオーバー画像を示す _on の部分を自由に変更できる

使用方法

画像を用意する

example.jpg をロールオーバーしたい場合は、名前の末尾に _on を付けた画像 example_on.jpg を example.jpg と同じディレクトリに入れておく。

JSファイルの読み込み

他のプラグインと同様、jQuery本体→プラグイン→設定の順で読み込み。

<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jquery.rollover.js"></script>

指定方法の例

最後の例のためにプラグイン化したと言っても過言では無い。

jQuery(function($) {
	// 基本
	$('#nav a img').rollover();

	// inputもいける
	$('form input:image').rollover();

	// 複数指定も楽々
	$('#nav a img, form input:image').rollover();

	// 引数で _on の部分を指定できる
	$('#nav a img').rollover('_over');
});

まとめ

  • ロールオーバーする画像の末尾に _on を付ける
  • _on の部分は引数で指定すれば変更も可能
  • jQuery本体→プラグイン→設定 の順で読み込み