ロールオーバー

ロールオーバー | よく使うjQuery

仕事でよく使うロールオーバーのjQueryのソースをメモ。

CSS HappyLifeさんで紹介されていたソースをjQueryベースに修正したものです。jQueryのおかげでソースがすっきりしました。新規サイトを作成する際必ず使います。

ロールオーバー
javascript
var images = $("img");
for(var i=0; i < images.size(); i++) {
    if(images.eq(i).attr("src").match("_off.")) {
        $("img").eq(i).hover(function() {
            $(this).attr('src', $(this).attr("src").replace("_off.", "_on."));
        }, function() {
            $(this).attr('src', $(this).attr("src").replace("_on.", "_off."));
        });
    }
}
  • サンプル
  • 解説

    これは画像ファイル名に「_off.」があるものを探しだし、マウスオーバーで「_off.」を「_on.」に書き換えるというものです。その為ロールオーバー前と後の2つの画像を用意し、それぞれのファイル名を「ファイル名_off.gif」と「ファイル名_on.gif」にします。
    ↓変数「images」にimg要素を格納します。

    var images = $("img");
    

    ↓for文でimg要素の数だけループさせます。数がsize()で取得します。

    for(var i=0; i < images.size(); i++) {
    

    ↓img要素のi番目のsrc属性の値が「_off.」にマッチするかどうかをチェックします。

    if(images.eq(i).attr("src").match("_off.")) {
    

    ↓「_off.」にマッチする値があった場合、対象のimg要素にマウスオーバーしたら(hover)、src属性の値の「_off.」を「_on.」に置換えます。

    $("img").eq(i).hover(function() {
         $(this).attr('src', $(this).attr("src").replace("_off.", "_on."));
    }
    

    ↓対象のimg要素からマウスアウトしたら、src属性の値の「_on.」から「_off.」に戻します。

    function() {
         $(this).attr('src', $(this).attr("src").replace("_on.", "_off."));
    }
    

    2 thoughts on “ロールオーバー | よく使うjQuery”

    1. 本家のjsファイルではうまくいきましたが、jqueryを使用したものがうまくいきません。
      具体的なコードの見本があるとうれしいです。

      1. ダウンロードでサンプルを落とせるように致しました。
        http://www.finefinefine.jp/web/kiji227/

        ちなみに動かいない原因ですが、$(function() { ~ });で囲っていますか?
        紹介したスクリプトでは省略してしまったのですが、$(function() { ~ });で囲わなければ動きませんのでご注意下さい。

        例)
        $(function() {
        var images = $(“img”);
        for(var i=0; i < images.size(); i++) {
        if(images.eq(i).attr("src").match("_off.")) {
        $("img").eq(i).hover(function() {
        $(this).attr('src', $(this).attr("src").replace("_off.", "_on."));
        }, function() {
        $(this).attr('src', $(this).attr("src").replace("_on.", "_off."));
        });
        }
        }
        });

    コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です