jQueryでDIV背景画像を切り替える

207

勤務先の会社の通話料金表を展開/縮小しています。私は現在、その下にそれを展開するためのボタンのあるテーブルを持っています。ボタンには「展開」と書かれています。クリックするとボタンが「折りたたむ」に変わり、もう一度クリックするとボタンが「展開」に戻ることを除いて、機能します。ボタンの書き込みは背景画像です。

したがって、基本的に必要なのは、トグルのようなものを除いて、クリックされたdivの背景画像を変更することだけです。

jquery 
— zuk1
ソース
3
なぜ背景画像なのか？なぜテキストではないのですか？
— uınbɐɥs
1
彼が数年後に答えを受け入れなかったので私は反対票を投じました、彼が@ user1040899でも大丈夫であることを願っています！
— gsamaras
@ user1040899 zuk1最後Aug 9 '10 at 0:42にSOで見たのは多分そのためです:(
— M. Junaid Salaat

回答:

443 
$('#divID').css("background-image", "url(/myimage.jpg)");

トリックを行う必要があります、要素のクリックイベントに接続するだけです

$('#divID').click(function()
{
  // do my image switching logic here.
});
— ニック
ソース
@fuccboiは、ユーザーがオプションを選択したときに、アニメーション化されたsvgチェックマークを発するためにこのコードを使用しているためです。:)
— norcal johnny
良い答え、指摘したいのですが>> url（）は
— 文字列の一部
62

個人的には、JavaScriptコードを使用して2つのクラスを切り替えるだけです。

CSSにdivで必要なすべての概要を示すバックグラウンドルールを設定してから、2つのクラス（たとえば、展開と折りたたみ）をルールとして追加し、それぞれに正しい背景画像（スプライトを使用する場合は背景の位置）を追加します。

異なる画像のCSS

.div {
    /* button size etc properties */
}

.expanded {background: url(img/x.gif) no-repeat left top;}
.collapsed {background: url(img/y.gif) no-repeat left top;}

または画像スプライト付きのCSS

.div {
    background: url(img/sprite.gif) no-repeat left top;
    /* Other styles */
}

.expanded {background-position: left bottom;}

その後...

画像付きJavaScriptコード

$(function){
    $('#button').click(function(){
        if($(this).hasClass('expanded'))
        {
            $(this).addClass('collapsed').removeClass('expanded');
        }
        else
        {
            $(this).addClass('expanded').removeClass('collapsed');
        }
    });
}

スプライトを使用したJavaScript

注：エレガントなtoggleClassはInternet Explorer 6では機能しませんが、以下のaddClass/ removeClassメソッドはこの状況でも正常に機能します

最もエレガントなソリューション（残念ながらInternet Explorer 6に対応していません）

$(function){
        $('#button').click(function(){
            $(this).toggleClass('expanded');
        });
    }

$(function){
        $('#button').click(function(){
            if($(this).hasClass('expanded'))
            {
                $(this).removeClass('expanded');
            }
            else
            {
                $(this).addClass('expanded');
            }
        });
    }

私の知る限り、この方法はブラウザー全体で機能し、スクリプト内のURLの変更よりもCSSやクラスを使用する方がはるかに快適です。

— ケリー
ソース
「注：エレガントなtoggleClassはInternet Explorer 6では機能しません」
— Chaoley '25 / 07/25
43

jQueryで背景画像のCSSを変更するには、2つの方法があります。

  1. $('selector').css('backgroundImage','url(images/example.jpg)');
  2. $('selector').css({'background-image':'url(images/example.jpg)'});

違いに注意してください。2番目の方法では、従来のCSSを使用して、複数のCSSプロパティを一緒に文字列化できます。

— エクロポリス
ソース
6
2.不正解です。$（ 'selector'）。css（{'background-color'： 'yellow'、 'background-image'： 'url（）'}）
— codecowboy
2.を試すとエラーが発生します
— キャッチされ
17

背景画像にCSSスプライトを使用する場合、拡大または縮小のどちらであるかに応じて、背景のオフセット+/- nピクセルをバンプできます。トグルではありませんが、背景画像のURLを切り替える必要があるよりはそれに近いです。

— デイブワード
ソース
2
おまけ：別の画像を使用する場合、ロード時に表示される画像のみが実際にロードされます。2番目の状態が読み込まれる前にイメージを切り替えると、少し遅延が発生します。スプライトを使用すると、画像は1つだけになり、すでに存在します。
— Lasar、2008年
14

ここに私がそれをする方法があります：

CSS

#button{
   background-image: url("initial_image.png");
}

#button.toggled{
  background-image:url("toggled_image.png");
}

JS

$('#button').click(function(){
  $('#my_content').toggle();
  $(this).toggleClass('toggled');
});
— ルーパックス
ソース
最終的にはjQuery .toggleClass()機能を使用できます。
— パウロ・ブエノ
私がこれを投稿した2日後にtoggleClassについて知りました：P
— Loupax
10

これを行う1つの方法は、SPANまたはDIV内の両方の画像をHTMLに配置することです。CSSまたはページの読み込み時にJSを使用して、デフォルトを非表示にできます。次に、クリックで切り替えることができます。これは、リストに左/下アイコンを配置するために使用している同様の例です。

$(document).ready(function(){
    $(".button").click(function () {
        $(this).children(".arrow").toggle();
            return false;
    });
});

<a href="#" class="button">
    <span class="arrow">
        <img src="/images/icons/left.png" alt="+" />
    </span>
    <span class="arrow" style="display: none;">
        <img src="/images/down.png" alt="-" />
    </span>
</a>
— alexp206
ソース
5

これは、WinXP上の現在のすべてのブラウザで機能します。基本的には、現在の背景画像を確認するだけです。image1の場合はimage2を表示し、それ以外の場合はimage1を表示します。

jsapiのものは、Google CDNからjQueryをロードするだけです（デスクトップ上のその他のファイルをテストするのが簡単です）。

置き換えは、ブラウザ間の互換性のためです（オペラ、つまりURLに引用符を追加し、Firefox、Chrome、Safariで引用符を削除します）。

<html>
    <head>
        <script src="http://www.google.com/jsapi"></script>
        <script>
          google.load("jquery", "1.2.6");
          google.setOnLoadCallback(function() {
            var original_image = 'url(http://stackoverflow.com/Content/img/wmd/link.png)';
            var second_image = 'url(http://stackoverflow.com/Content/img/wmd/code.png)';

            $('.mydiv').click(function() {
                if ($(this).css('background-image').replace(/"/g, '') == original_image) {
                    $(this).css('background-image', second_image);
                } else {
                    $(this).css('background-image', original_image);
                }

                return false;
            });
          });
        </script>

        <style>
            .mydiv {
                background-image: url('http://stackoverflow.com/Content/img/wmd/link.png');
                width: 100px;
                height: 100px;
            }
        </style>
    </head>
    <body>
        <div class="mydiv">&nbsp;</div>
    </body>
</html>
— enobrev
ソース
1
例のためにやっただけです。このようにして、コード全体が独自に機能します。
— enobrev、2008年
20
Googleからの読み込みは、一般向けのサイトに適しています。GoogleのCDNは、サイトよりも高速である可能性が非常に高く、サイトの他のものと並行してダウンロードできます。また、それを使用するサイトが多いほど、ユーザーのブラウザーからキャッシュされたコピーが使用される可能性が高くなります。
— Dave Ward、
2
Googleがダウンしても、私がまだ生きているなら。お知らせ下さい。
— greenimpala 2010
1
@Nick jQuery.comに移動すると、独自のWebサイトの使用方法がわかります<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
— わずか
2
@Nick問題は本当にあるべきだ、なぜGoogleから離れたらロードしたくないのか。:-)
— ジョンパーカー
5

鉱山はアニメーション化されています：

$(this).animate({
    opacity: 0
}, 100, function() {
    // Callback
    $(this).css("background-image", "url(" + new_img + ")").promise().done(function(){
        // Callback of the callback :)
        $(this).animate({
            opacity: 1
        }, 600)
    });    
});
— yPhil
ソース
4

相対パスを保持し、addClass関数を使用しないようにしたかったので、正規表現を使用しました。私はそれを複雑にしたかっただけです、笑。

$(".travelinfo-btn").click(
            function() {
                $("html, body").animate({scrollTop: $(this).offset().top}, 200);
                var bgImg = $(this).css('background-image')
                var bgPath = bgImg.substr(0, bgImg.lastIndexOf('/')+1)
                if(bgImg.match(/collapse/)) {
                    $(this).stop().css('background-image', bgImg.replace(/collapse/,'expand'));
                    $(this).next(".travelinfo-item").stop().slideToggle(400);
                } else {
                    $(this).stop().css('background-image', bgImg.replace(/expand/,'collapse'));
                    $(this).next(".travelinfo-item").stop().slideToggle(400);
                }
            }
        );
— user2220104
ソース
3

古い投稿ですが、これにより、イメージスプライトを使用して、cssプロパティ（背景、繰り返し、左上）の省略形を使用して繰り返しと位置を調整できます。 

$.each($('.smallPreview'), function(i){
  var $this = $(this);

  $this.mouseenter(function(){
    $this.css('background', 'url(Assets/imgs/imgBckg-Small_Over.png) no-repeat 0 0');
  });

  $this.mouseleave(function(){
    $this.css('background', 'url(Assets/imgs/imgBckg-Small.png) no-repeat 0 0');
  });

});
— bphillips
ソース
2

CSSスプライトが最もよく機能します。クラスを切り替えてjQueryで 'background-image'プロパティを操作してみましたが、どれも機能しませんでした。これは、ブラウザー（少なくとも最新の安定したChrome）が既にロードされている画像を「再ロード」できないためだと思います。

ボーナス：CSSスプライトはダウンロードと表示が高速です。HTTPリクエストが少ないほど、ページの読み込みが速くなります。HTTPの数を減らすことは、フロントエンドのパフォーマンスを改善するための最良の方法なので、このルートを常に使用することをお勧めします。

— DjebbZ
ソース
2

これはかなり単純な応答であり、アイテムのリストでサイトの背景を変更します

function randomToN(maxVal) {
    var randVal = Math.random() * maxVal;
    return typeof 0 == 'undefined' ? Math.round(randVal) : randVal.toFixed(0);
};
var list = [ "IMG0.EXT", "IMG2.EXT","IMG3.EXT" ], // Images
    ram = list[parseFloat(randomToN(list.length))], // Random 1 to n
    img = ram == undefined || ram == null ? list[0] : ram; // Detect null
$("div#ID").css("backgroundImage", "url(" + img + ")"); // push de background
簡単？それははるかに簡単かもしれません。なぜランダム？
— uınbɐɥs
ユーザーが背景を変更するものを簡単に確認でき、変更を行うためです:)。申し訳ありませんが、私の英語
0

私は常にタイムスタンプも使用して、ブラウザが画像をキャッシュしないようにします。たとえば、ユーザーがアバターをローテーションしている場合、アバターはキャッシュされ、変更されていないように見えることがよくあります。 

var d = new Date();
var t = d.getTime();

$('#avatar').css("background-image", "url(" + iPath + "?" + t + ")");
— AdamVanBuskirk
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.