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

183

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

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

источник

2008-10-31 zuk1

Почему фоновое изображение? Почему не * текст *? – 2012-09-04 19:41:24

Я проголосовал, потому что он не принял ответ через несколько лет, надеюсь, что он в порядке, хотя @ user1040899! – gsamaras 2015-12-09 03:33:58

@ user1040899 zuk1 Последнее посещение `Aug 9 '10 at 0: 42` at ** SO ** возможно, поэтому, :( – 2016-11-03 11:17:20

402

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

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

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

источник

2008-10-31 14:31:48 Nick

Это хороший ответ для диалогового окна jquery. – 2013-03-19 23:29:28

Работал для меня. ^^ Спасибо! – khailcs 2016-05-06 23:44:48

Будет ли это работать с SVG? – 2016-12-02 07:27:13

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

источник

2008-10-31 14:32:48 alexp206

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

источник

2008-10-31 14:32:54

Бонус: Если вы используете отдельные изображения, то только тот, который отображается при загрузке, фактически загружен. При переключении изображений перед загрузкой второго состояния будет небольшая задержка. С спрайтом у вас есть только одно изображение, и оно уже будет там. – Lasar 2008-10-31 15:29:04

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

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

Замена предназначена для кросс-браузерной совместимости (опера и т. Д. Добавляет кавычки к URL-адресам URL-адреса и firefox, chrome и safari remove).

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

источник

2008-10-31 14:33:57 enobrev

просто сделал это для примера. Таким образом, весь фрагмент кода работает сам по себе. – enobrev 2008-10-31 14:44:13

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

источник

2010-03-24 15:43:47

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

Настройте все, что вам нужно, на свое правило div MINUS, затем добавьте два класса (например: развернутый &) в качестве правил, каждый из которых имеет правильное фоновое изображение (или положение фона при использовании спрайта).

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

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

источник

2010-09-27 23:12:11 Kelly

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

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

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

источник

2011-02-07 00:39:21 Ecropolis

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

CSS

#button{ 
    background-image: url("initial_image.png"); 
} 

#button.toggled{ 
    background-image:url("toggled_image.png"); 
}

$('#button').click(function(){ 
    $('#my_content').toggle(); 
    $(this).toggleClass('toggled'); 
});

источник

2012-01-11 22:30:08 Loupax

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

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

источник

2012-03-05 19:06:50 DjebbZ

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

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

источник

2012-05-15 00:47:21

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

});

источник

2012-06-19 14:18:47 bphillips

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

источник

2013-03-28 14:15:44 user2220104

Mine оживляется:

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

источник

2016-07-06 09:31:08 yPhil

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

ответ

Смежные вопросы