JQuery के साथ एक DIV पृष्ठभूमि छवि स्विच करना

Question

मैं जिस कंपनी के लिए काम करता हूं उसके लिए मैं एक विस्तार / पतन कॉल दर तालिका बना रहा हूं। मेरे पास वर्तमान में इसके विस्तार के लिए एक बटन है जिसके नीचे एक बटन है, बटन "विस्तार" कहता है। यह कार्यात्मक है जब मुझे क्लिक करने के लिए बटन को "संकुचित" करने के लिए बदलने की आवश्यकता होती है और जब इसे फिर से क्लिक किया जाता है, तो "विस्तार" पर वापस जाएं। बटन पर लेखन एक पृष्ठभूमि छवि है।

तो मूल रूप से मुझे केवल एक टॉगल की तरह को छोड़कर, एक क्लिक की पृष्ठभूमि की छवि को बदलना होगा।

Comments

एक पृष्ठभूमि छवि क्यों? पाठ क्यों नहीं ?

— अपराह्न

मैंने नीचे मतदान किया क्योंकि उसने अब से कई वर्षों के उत्तर को स्वीकार नहीं किया, आशा है कि वह ठीक है, हालांकि @ user1040899!

— gsamaras

@ user1040899 zuk1 SOAug 9 '10 at 0:42 पर अंतिम बार देखा गया है शायद इसीलिए, :(

— एम। जुनैद सलात

Answer 1

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

चाल करना चाहिए, बस इसे तत्व पर एक क्लिक घटना में हुक करें

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

Comments

जब वह उपयोगकर्ता एक विकल्प का चयन करता है, तो मैं इस कोड का उपयोग एनिमेटेड svg चेकमार्क को बंद करने के लिए करता हूं। :)

— नॉर्कोल जॉनी

अच्छा जवाब, मैं पॉइंट आउट करना चाहता हूँ >> url () IS STRING OF STRING << जो वास्तव में भ्रामक है अगर आप एक मजबूत

— टाइपफाइफ़

Answer 2

मैं व्यक्तिगत रूप से केवल 2 वर्गों के बीच स्विच करने के लिए जावास्क्रिप्ट कोड का उपयोग करूंगा।

सीएसएस रूपरेखा की जरूरत है सब कुछ आप अपने div MINUS पर पृष्ठभूमि नियम की जरूरत है, तो दो वर्गों (जैसे: विस्तारित और ढह) को सही पृष्ठभूमि छवि (या एक प्रेत का उपयोग कर पृष्ठभूमि की स्थिति) के साथ प्रत्येक के रूप में जोड़ें।

विभिन्न छवियों के साथ सीएसएस

.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;}

या छवि स्प्राइट के साथ सीएसएस

.div {
    background: url(img/sprite.gif) no-repeat left top;
    /* Other styles */
}

.expanded {background-position: left bottom;}

फिर...

छवियों के साथ जावास्क्रिप्ट कोड

$(function){
    $('#button').click(function(){
        if($(this).hasClass('expanded'))
        {
            $(this).addClass('collapsed').removeClass('expanded');
        }
        else
        {
            $(this).addClass('expanded').removeClass('collapsed');
        }
    });
}

स्प्राइट के साथ जावास्क्रिप्ट

नोट: सुरुचिपूर्ण toggleClass इंटरनेट एक्सप्लोरर 6 में काम नहीं करता है, लेकिन नीचे addClass/ removeClassविधि इस स्थिति में भी ठीक काम करेगी

सबसे सुंदर समाधान (दुर्भाग्य से इंटरनेट एक्सप्लोरर 6 अनुकूल नहीं)

$(function){
        $('#button').click(function(){
            $(this).toggleClass('expanded');
        });
    }

$(function){
        $('#button').click(function(){
            if($(this).hasClass('expanded'))
            {
                $(this).removeClass('expanded');
            }
            else
            {
                $(this).addClass('expanded');
            }
        });
    }

जहाँ तक मुझे पता है कि यह विधि ब्राउज़रों के साथ काम करेगी, और मुझे स्क्रिप्ट में URL परिवर्तनों के साथ सीएसएस और कक्षाओं के साथ खेलने में अधिक सहज महसूस होगा।

Comments

"नोट: सुरुचिपूर्ण टॉगलक्लास इंटरनेट एक्सप्लोरर 6 में काम नहीं करता है"

— छोले

Answer 3

JQuery के साथ पृष्ठभूमि छवि CSS को बदलने के दो अलग-अलग तरीके हैं।

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

मतभेदों को ध्यान से देखें। दूसरे में, आप पारंपरिक सीएसएस और स्ट्रिंग कई सीएसएस गुणों का एक साथ उपयोग कर सकते हैं।

Comments

2. गलत एक अमान्य है। एक साथ कई गुणों को स्ट्रिंग करना इस तरह किया जाता है: $ ('चयनकर्ता')। css ({'बैकग्राउंड-कलर': 'येलो', 'बैकग्राउंड-इमेज': 'url ()'))

— codecowboy

अगर मैं 2 की कोशिश करता हूं, तो मुझे एक त्रुटि मिलती है

— बिना पढ़ा हुआ वाक्यविन्यास

Answer 4

यदि आप बैकग्राउंड इमेज के लिए CSS स्प्राइट का उपयोग करते हैं, तो आप बैकग्राउंड ऑफसेट +/- n पिक्सल को टक्कर दे सकते हैं जो इस बात पर निर्भर करता है कि आप विस्तार कर रहे थे या ढह रहे थे। टॉगल नहीं है, लेकिन बैकग्राउंड इमेज यूआरएल स्विच करने की तुलना में इसके करीब है।

Comments

बोनस: ifyou अलग-अलग छवियों का उपयोग करता है जो केवल लोड पर प्रदर्शित होता है, वास्तव में लोड होता है। दूसरी स्थिति लोड होने से पहले छवियों को स्विच करने पर थोड़ी देरी होगी। स्प्राइट के साथ, आपके पास केवल एक छवि है और यह पहले से ही होगा।

— लक्सर

Answer 5

यहाँ है कि मैं यह कैसे करते हैं:

सीएसएस

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

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

जे एस

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

Comments

आप अंततः jQuery .toggleClass()सुविधा का उपयोग कर सकते हैं ।

— पाउलो ब्यूनो

टॉगलक्लास के बारे में पता लगाने के दो दिन बाद मैंने यह पोस्ट किया: पी

— लुपैक्स

Answer 6

इसका एक तरीका यह है कि दोनों चित्रों को HTML में, एक SPAN या DIV के अंदर, आप सीएसएस के साथ या पेज लोड पर 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 छवि की जाँच कर रहा है। अगर यह इमेज 1 है, तो इमेज 2 दिखाएं, अन्यथा इमेज 1 दिखाएं।

Jsapi सामान सिर्फ Google CDN (डेस्कटॉप पर एक misc फ़ाइल के परीक्षण के लिए आसान) से jQuery को लोड करता है।

प्रतिस्थापित क्रॉस-ब्राउज़र संगतता (ओपेरा और यानी url और फ़ायरफ़ॉक्स, क्रोम और सफारी हटाने उद्धरण को उद्धरण जोड़ें) के लिए है।

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

Comments

बस उदाहरण के लिए किया था। इस तरह, पूरा कोड स्निपेट अपने आप काम करता है।

— enobrev

सार्वजनिक सामना करने वाली साइटों के लिए Google से इसे लोड करना बेहतर है। Google की CDN आपकी साइट की तुलना में बहुत तेज़ है, यह आपकी साइट पर किसी अन्य चीज़ के साथ समानांतर में डाउनलोड करने की अनुमति देता है, और अधिक साइटें जो इसका उपयोग करती हैं, उपयोगकर्ता के ब्राउज़र से एक कैश्ड प्रतिलिपि का उपयोग करने की अधिक संभावना है।

— डेव वार्ड

यदि Google नीचे चला जाता है और मैं अभी भी जीवित हूं; मुझे बताएं।

— हरियाली अमावस्या

JQuery.com को @Nick जाओ, तो आप अपने खुद के वेबसाइट का उपयोग करता है मिल जाएगा<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

— meagar

@ ध्यान दें कि प्रश्न वास्तव में होना चाहिए, यदि आप Google से लोड नहीं करना चाहते हैं। :-)

— जॉन पार्कर

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

मैंने नियमित अभिव्यक्ति का उपयोग करते हुए मेरा उपयोग किया, क्योंकि मैं एक सापेक्ष पथ को संरक्षित करना चाहता था और ऐडक्लास फ़ंक्शन को जोड़ना नहीं चाहता था। मैं बस इसे दृढ़ बनाना चाहता था, योग्य।

$(".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

पुरानी पोस्ट, लेकिन यह आपको सीएसएस प्रॉपर्टी के लिए शॉर्टहैंड (बैकग्राउंड, रिपीट, लेफ्ट टॉप) का इस्तेमाल करके रिपीट के साथ-साथ रिपीट और पोजिशन को एडजस्ट करने की सुविधा देगा।

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

});

Answer 11

मुझे एक फोरम में हल मिला है, टॉगल बैकग्राउंड Img ।

Comments

स्टैक ओवरफ्लो में आपका स्वागत है, सेबस्टियन। यह सवाल एक साल पहले पूछा गया था, और पहले से ही कई स्वीकार्य जवाब हैं।

— rjh

Answer 12

CSS Sprites सबसे अच्छा काम करते हैं। मैंने कक्षाओं को बदलने और jQuery के साथ 'पृष्ठभूमि-छवि' संपत्ति में हेरफेर करने की कोशिश की, कोई भी काम नहीं किया। मुझे लगता है कि यह इसलिए है क्योंकि ब्राउज़र (कम से कम नवीनतम स्थिर क्रोम) पहले से लोड की गई छवि को "पुनः लोड" नहीं कर सकता है।

बोनस: सीएसएस स्प्राइट्स डाउनलोड करने के लिए तेज़ हैं और प्रदर्शित करने के लिए तेज़ हैं। कम HTTP अनुरोधों का अर्थ है तेज़ पृष्ठ लोड। HTTP की संख्या को कम करना फ्रंट एंड परफॉर्मेंस को बेहतर बनाने का सबसे अच्छा तरीका है, इसलिए मैं हर समय इस रूट पर जाने की सलाह देता हूं।

Answer 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

Comments

सरल? यह बहुत सरल हो सकता है। क्यों बेतरतीब?

— unnb us

क्योंकि उपयोगकर्ता को यह देखना आसान है कि पृष्ठभूमि क्या बदलती है, और क्या परिवर्तन करते हैं :)। मेरी अंग्रेजी के लिए खेद है

Answer 14

मैं हमेशा एक टाइमस्टैम्प का उपयोग करता हूं और साथ ही ब्राउज़र को छवि को रोकने से रोकता हूं। उदाहरण के लिए, यदि उपयोगकर्ता अपने अवतार को घुमा रहा है, तो यह अक्सर कैश हो जाएगा और नहीं बदलेगा।

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

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