jQueryのプラグイン、jQuery_Autoで画像のロールオーバー

CSS HappyLifeさんでjavascriptによるイメージロールオーバーの記事を書かれていたので、触発されて以前から書こうと思っていたjQueryネタを書きます。
ロールオーバー｜CSS HappyLife

jQueryならロールオーバーのプラグインくらいあるだろうと思って探していたら、jQuery_Autoというものを見つけたので使ってみました。

今回はロールオーバーのみ説明しますが、簡易なタブも作成できるようです。

このプラグインの利点はclass指定でロールオーバーを指定するところです。なのでCSS HappyLifeさんが書かれていた間違って_offってファイル名に付けた場合_onを探しにいって×とか出る可能性があるのでご注意を。という心配もなくなります。

それでは使い方を説明します。まずjquery.jsとjquery_auto.jsを読み込みます。

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

準備する画像は、適当な名前の画像（通常時の画像）と通常時の画像に”_over”をつけた画像（ロールオーバー時の画像）です。これらの画像は同じフォルダに置きます。

(X)HTMLのソースは下記です。classに”Hover”を指定します。それだけです。

<img src="sample.gif" alt="sample" class="Hover" />

sample

プリロードもついているので読み込みも早いです。

その他のjQueryプラグインは下記サイトなどが参考になります。今後もいろいろと試していきたいと思ってます。

http://webtech-walker.com/archive/2007/06/21130210.html/trackback

※トラックバックを受け付けてから表示するまでにしばらく時間がかかる場合があります。

monotone blog 2007年6月27日 16時37分

jQueryで画像のロールオーバー

「jQueryのプラグイン、jQuery_Autoで画像のロールオーバー」という記事を見つけたので、早速作成中のサイトで使用してみました。画像のロールオ…