Mengalihkan gambar latar DIV dengan jQuery

Saya membuat tabel tarif panggilan tambah / lipat untuk perusahaan tempat saya bekerja. Saat ini saya memiliki meja dengan tombol di bawahnya untuk membentangkannya, tombolnya bertuliskan "Expand". Fungsional kecuali saya perlu tombol untuk berubah menjadi "Ciutkan" ketika diklik dan tentu saja kembali ke "Perluas" ketika diklik lagi. Tulisan pada tombol adalah gambar latar belakang.

Jadi pada dasarnya yang saya butuhkan adalah mengubah gambar latar belakang div ketika diklik, kecuali semacam toggle.

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

Seharusnya melakukan trik, cukup sambungkan ke acara klik pada elemen

$('#divID').click(function()
{
  // do my image switching logic here.
});

Saya pribadi hanya akan menggunakan kode JavaScript untuk beralih di antara 2 kelas.

Buat CSS menguraikan semua yang Anda butuhkan di div Anda MINUS aturan latar belakang, kemudian tambahkan dua kelas (misalnya: diperluas & diciutkan) sebagai aturan masing-masing dengan gambar latar belakang yang benar (atau posisi latar belakang jika menggunakan sprite).

CSS dengan gambar berbeda

.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;}

Atau CSS dengan sprite gambar

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

.expanded {background-position: left bottom;}

Kemudian...

Kode JavaScript dengan gambar

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

JavaScript dengan sprite

Catatan: toggleClass yang elegan tidak berfungsi di Internet Explorer 6, tetapi metode di bawah addClass/ removeClassini akan berfungsi dengan baik dalam situasi ini juga

Solusi paling elegan (sayangnya tidak ramah 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');
            }
        });
    }

Sejauh yang saya tahu metode ini akan bekerja di seluruh browser, dan saya akan merasa jauh lebih nyaman bermain dengan CSS dan kelas daripada dengan perubahan URL dalam skrip.

Ada dua cara berbeda untuk mengubah CSS gambar latar belakang dengan jQuery.

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

Perhatikan baik-baik untuk memperhatikan perbedaannya. Dalam yang kedua, Anda dapat menggunakan CSS konvensional dan merangkai beberapa properti CSS secara bersamaan.

Jika Anda menggunakan sprite CSS untuk gambar latar belakang, Anda dapat menabrak offset latar belakang +/- n piksel tergantung pada apakah Anda memperluas atau mengecil. Bukan beralih, tetapi lebih dekat daripada harus beralih URL gambar latar belakang.

Inilah cara saya melakukannya:

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');
});

Salah satu cara untuk melakukan ini adalah dengan meletakkan kedua gambar dalam HTML, di dalam SPAN atau DIV, Anda dapat menyembunyikan default baik dengan CSS, atau dengan JS pada pemuatan halaman. Kemudian Anda dapat beralih di klik. Berikut adalah contoh serupa yang saya gunakan untuk meletakkan ikon kiri / bawah pada daftar:

$(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>

Ini berfungsi pada semua browser saat ini di WinXP. Pada dasarnya hanya memeriksa apa gambar backgrond saat ini. Jika itu adalah image1, tampilkan image2, atau tampilkan image1.

Hal-hal jsapi hanya memuat jQuery dari Google CDN (lebih mudah untuk menguji file misc di desktop).

Pengganti adalah untuk kompatibilitas lintas-browser (opera dan mis. Tambahkan tanda kutip ke url dan firefox, chrome dan safari hapus tanda kutip).

<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>

Milik saya dianimasikan:

$(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)
    });    
});

Saya menambang menggunakan ekspresi reguler, karena saya ingin mempertahankan jalur relatif dan tidak menggunakan fungsi addClass. Saya hanya ingin membuatnya berbelit, lol.

$(".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);
                }
            }
        );

Posting lama, tetapi ini akan memungkinkan Anda untuk menggunakan sprite gambar dan menyesuaikan pengulangan serta penentuan posisi dengan menggunakan steno untuk properti css (latar belakang, ulangi, atas kiri).

$.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');
  });

});

Saya telah menemukan solusi di forum, Toggle Background Img .

CSS Sprite bekerja paling baik. Saya mencoba beralih kelas dan memanipulasi properti 'background-image' dengan jQuery, tidak ada yang berhasil. Saya pikir itu karena browser (setidaknya Chrome stabil terbaru) tidak dapat "memuat ulang" gambar yang sudah dimuat.

Bonus: CSS Sprite lebih cepat diunduh dan ditampilkan lebih cepat. Lebih sedikit permintaan HTTP berarti pemuatan halaman lebih cepat. Mengurangi jumlah HTTP adalah cara terbaik untuk meningkatkan kinerja front-end, jadi saya sarankan pergi rute ini sepanjang waktu.

Ini adalah respons yang cukup sederhana mengubah latar belakang situs dengan daftar item

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

Saya selalu menggunakan stempel waktu juga untuk mencegah browser dari caching gambar. Misalnya, jika pengguna memutar avatar mereka, itu sering akan di-cache dan tampaknya tidak berubah.

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

$('#avatar').css("background-image", "url(" + iPath + "?" + t + ")");