Focusover

画像をロールオーバーで切り換えるjQueryプラグインを作成しました。

名称
Focusover2010/1/20更新しました
動作環境
InternetExplorer 6 / 7 / 8
Firefox 3.5
Opera 10
Safari 4
Netscape 7.1
特徴
クラス「rollover」の画像をマウスオーバーしたときに、ファイル名に「_on」を付けたものに切り替えます。
headにjavascriptへのリンクとimg要素にクラスをつけます。javascriptファイルを変更する必要はありません
疑似クラス:focus:blurに対応。
jQuery1.3.2 及び jQuery1.4 で動作します。
ライセンス
GPL and MIT License

デモ

設置方法

ダウンロード

  1. 上記リンクからダウンロードしたファイルを、以下の通りに保存します。
    [js]
      ├ jquery-1.4.min.js
      └ jquery.focusover.js
    
  2. htmlファイルのhead部分に以下の文を追加します。
    <script type="text/javascript" src="js/jquery-1.4.min.js"></script>
    <script type="text/javascript" src="js/jquery.focusover.js"></script>
    
  3. ロールオーバーさせるimg要素に、rolloverクラスを追加します。
    <img src="parts/sample.jpg" alt="" class="rollover" /> 
  4. 上記画像と同じフォルダに、ロールオーバーするときの画像をsample_on.jpgのように画像の名前 + _on + 拡張子にして保存します。(image.gifならimage_on.gif)
  5. htmlファイルを保存して完了です。

オプション

クラスの変更

クラスを変更する場合は、jquery.focusover.jsを開いて、最下行のrolloverの部分を変更します。

$('img.rollover,input.rollover').focusover();

接尾辞の変更

ロールオーバーする画像の接尾辞_onを変更する場合は、jquery.focusover.jsを開いて、最下行のfocusover()の括弧の中に、変更後の接尾辞(例:'-roll')を記入します。

$('img.rollover,input.rollover').focusover('-roll');

更新履歴

1.0.1
jQuery.noConflict()を使用しても動作するように変更。
1.0.0
公開

ページトップに戻る