Daily happenings, XHTML, CSS, MT, WP, Web, a memo, etc…

jQueryロールオーバープラグイン

クリーンなHTMLで、簡単に画像のロールオーバーを実装出来る、「jQueryロールオーバープラグイン」

jQueryロールオーバープラグイン

jQueryロールオーバープラグイン

使用方法

末尾に「_on」 を付けた、ロールオーバー用画像を用意します。

「jQuery」と、jQueryロールオーバープラグインのサイトから「jquery.rollover.js」をダウンロードし、スクリプトを読み込みます。

jQuery

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

下記のJavaScriptを「rollover.js」の名前で保存します。

jQuery(function($) {
    // セレクタを指定
    $('#global-nav a img').rollover();
});

input要素にも使えるようです。