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

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

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

ОТВЕТЫ

Ответ 1

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

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

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

Ответ 2

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

Настройте CSS, чтобы все, что вам нужно, в вашем ключевое правило div 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-адресов в script.

Ответ 3

Существует два разных способа изменить CSS-код фона с помощью jQuery.

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

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

Ответ 4

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

Ответ 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');
});

Ответ 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>

Ответ 7

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

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

Замена заключается в совместимости с несколькими браузерами (опера и т.д. добавить кавычки к URL-адресам и Firefox, хром и сафари удалить кавычки).

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

Ответ 8

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

Ответ 9

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

});

Ответ 10

Анимированная шахта:

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

Ответ 12

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

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

Ответ 13

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

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