Переключение фонового изображения DIV с помощью jQuery

Я составляю таблицу расценок для компаний, в которых я работаю. В настоящее время у меня есть таблица с кнопкой под ней, чтобы развернуть ее, кнопка говорит «Развернуть». Это функционально, за исключением того, что мне нужно, чтобы кнопка менялась на «Свернуть» при нажатии, а затем, конечно, на «Развернуть» при повторном нажатии. Надпись на кнопке является фоновым изображением.

Таким образом, в основном все, что мне нужно, это изменить фоновое изображение элемента div, когда на него нажимают, кроме как переключение.

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

Нужно сделать трюк, просто подключите его в событии щелчка на элементе

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

Лично я бы просто использовал код JavaScript для переключения между двумя классами.

Сделайте так, чтобы CSS обрисовал в общих чертах все, что вам нужно в вашем Div, МИНУСЕ к фоновому правилу, затем добавьте два класса (например, расширенный и свернутый) в качестве правил, каждый из которых имеет правильное фоновое изображение (или положение фона, если используется спрайт).

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

Насколько я знаю, этот метод будет работать в разных браузерах, и я чувствовал бы себя гораздо более комфортно, играя с CSS и классами, чем с изменениями URL в скрипте.

Есть два разных способа изменить фоновое изображение CSS с помощью jQuery.

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

Посмотрите внимательно, чтобы отметить различия. Во втором вы можете использовать обычный CSS и объединять несколько свойств CSS вместе.

Если вы используете CSS-спрайт для фоновых изображений, вы можете увеличить смещение фона на +/- n пикселей в зависимости от того, расширяете ли вы или сворачиваете. Не переключение, но ближе к нему, чем необходимость переключения URL-адресов фонового изображения.

Вот как я это делаю:

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

Один из способов сделать это - поместить оба изображения в HTML, внутри SPAN или DIV, вы можете скрыть настройки по умолчанию либо с помощью 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>

Это работает во всех текущих браузерах на WinXP. В основном, просто проверяю текущее изображение backgrond. Если это image1, покажите image2, иначе покажите image1.

Материал jsapi просто загружает jQuery из CDN Google (проще для проверки файла misc на рабочем столе).

Замена предназначена для кросс-браузерной совместимости (например, добавьте цитаты в 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>

Мой анимирован:

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

Я сделал это с помощью регулярных выражений, так как я хотел сохранить относительный путь и не использовать добавить функцию 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);
                }
            }
        );

Старая запись, но это позволит вам использовать спрайт изображения и настроить повтор, а также позиционирование, используя сокращение для свойства css (background, repeat, left top).

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

});

Я нашел решение на форуме, Toggle Background Img .

CSS-спрайты работают лучше всего. Я пытался переключать классы и манипулировать свойством background-image с помощью jQuery, но ни один из них не работал. Я думаю, это потому, что браузеры (по крайней мере, последний стабильный Chrome) не могут «перезагрузить» уже загруженное изображение.

Бонус: CSS-спрайты быстрее загружаются и быстрее отображаются. Меньше HTTP-запросов означает более быструю загрузку страницы. Сокращение количества HTTP - лучший способ улучшить производительность интерфейса, поэтому я рекомендую постоянно идти по этому пути.

Это довольно простой ответ меняет фон сайта со списком элементов

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

Я также всегда использую временную метку, чтобы браузеры не кэшировали изображение. Например, если пользователь вращает свой аватар, он часто кэшируется и кажется неизменным.

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

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