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

Question

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

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

Answer 1

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

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

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

Answer 2

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

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

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 в скрипте.

Answer 3

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

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

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

Answer 4

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

Answer 5

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

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

Answer 6

Один из способов сделать это - поместить оба изображения в 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>

Answer 7

Это работает во всех текущих браузерах на 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>

Answer 8

Шахта анимирована:

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

Answer 9

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

Answer 10

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

});