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

Question

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

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

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

212

jquery

Источник

user26823 31 окт '08 в 14:23

13 ответов

Другие вопросы по тегам jquery

user26161 31 окт '08 в 14:31 2008-10-31 14:31 · Answer 1 · 2008-10-31 14:31

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

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

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

459

Источник

user26161 31 окт '08 в 14:31

user460029 27 сен '10 в 23:12 2010-09-27 23:12 · Answer 2 · 2010-09-27 23:12

Лично я бы просто использовал код 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 в скрипте.

user249355 07 фев '11 в 00:39 2011-02-07 00:39 · Answer 3 · 2011-02-07 00:39

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

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

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

user60 31 окт '08 в 14:32 2008-10-31 14:32 · Answer 4 · 2008-10-31 14:32

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

17

Источник

user60 31 окт '08 в 14:32

user208271 11 янв '12 в 22:30 2012-01-11 22:30 · Answer 5 · 2012-01-11 22:30

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

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

14

Источник

user208271 11 янв '12 в 22:30

user666 31 окт '08 в 14:32 2008-10-31 14:32 · Answer 6 · 2008-10-31 14:32

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

user1729094 06 июл '16 в 09:31 2016-07-06 09:31 · Answer 7 · 2016-07-06 09:31

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

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

6

Источник

user1729094 06 июл '16 в 09:31

user2220104 28 мар '13 в 14:15 2013-03-28 14:15 · Answer 8 · 2013-03-28 14:15

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

user14651 31 окт '08 в 14:33 2008-10-31 14:33 · Answer 9 · 2008-10-31 14:33

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

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

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

<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://stackru.com/Content/img/wmd/link.png)';
            var second_image = 'url(http://stackru.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://stackru.com/Content/img/wmd/link.png');
                width: 100px;
                height: 100px;
            }
        </style>
    </head>
    <body>
        <div class="mydiv">&nbsp;</div>
    </body>
</html>

user1466663 19 июн '12 в 14:18 2012-06-19 14:18 · Answer 10 · 2012-06-19 14:18

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

});

user2456574 25 ноя '19 в 14:12 2019-11-25 14:12 · Answer 11 · 2019-11-25 14:12

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

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

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

3

Источник

user2456574 25 ноя '19 в 14:12

15 май '12 в 00:47 2012-05-15 00:47 · Answer 12 · 2012-05-15 00:47

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

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

user300951 24 мар '10 в 15:43 2010-03-24 15:43 · Answer 13 · 2010-03-24 15:43

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

2

Источник

user300951 24 мар '10 в 15:43

user893242 05 мар '12 в 19:06 2012-03-05 19:06 · Answer 14 · 2012-03-05 19:06

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

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