การสลับภาพพื้นหลัง DIV ด้วย jQuery

207

ฉันกำลังทำตารางอัตราการขยาย / ยุบสำหรับ บริษัท ที่ฉันทำงานอยู่ ขณะนี้ฉันมีตารางที่มีปุ่มอยู่ข้างใต้เพื่อขยายปุ่มบอกว่า "ขยาย" มันใช้งานได้ยกเว้นฉันต้องการปุ่มเพื่อเปลี่ยนเป็น "ยุบ" เมื่อมันถูกคลิกและแน่นอนกลับไปที่ "ขยาย" เมื่อมันถูกคลิกอีกครั้ง การเขียนบนปุ่มเป็นภาพพื้นหลัง

ดังนั้นโดยพื้นฐานแล้วสิ่งที่ฉันต้องการก็คือเปลี่ยนภาพพื้นหลังของ div เมื่อมันถูกคลิกยกเว้นการเรียงสลับเหมือน

jquery

— zuk1
แหล่งที่มา

3

ทำไมภาพพื้นหลัง ทำไมไม่ส่งข้อความล่ะ

— uınbɐɥs

1

ฉันลงคะแนนเพราะเขาไม่ยอมรับคำตอบหลายปีนับจากนี้หวังว่าเขาจะโอเคแม้ว่า @ user1040899!

— gsamaras

@ user1040899 zuk1 เห็นครั้งสุดท้ายAug 9 '10 at 0:42ที่ดังนั้นอาจเป็นเหตุผล :(

— M. Junaid Salaat

443

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

ควรทำเคล็ดลับเพียงแค่เชื่อมโยงมันในเหตุการณ์คลิกในองค์ประกอบ

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

— กรงขัง
แหล่งที่มา

@fuccboi มันทำตามที่ฉันใช้รหัสนี้เพื่อดับเครื่องหมายภาพเคลื่อนไหว svg เมื่อผู้ใช้เลือกตัวเลือก :)

— norcal johnny

ตอบที่ดีฉันต้องการชี้ให้เห็น >> url () เป็นส่วนหนึ่งของสาย << ซึ่งสับสนจริง ๆ ถ้าคุณมาจากภาษา typedef ที่แข็งแกร่ง

— clockw0rk

62

ส่วนตัวแล้วฉันจะใช้รหัส JavaScript เพื่อสลับไปมาระหว่าง 2 คลาส

ให้ CSS จัดเค้าร่างทุกสิ่งที่คุณต้องการใน div ลบกฎพื้นหลังของคุณแล้วเพิ่มสองคลาส (เช่น: ขยายและยุบ) เป็นกฎแต่ละรายการด้วยภาพพื้นหลังที่ถูกต้อง (หรือตำแหน่งพื้นหลังหากใช้ sprite)

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 พร้อม sprite ภาพ

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

จาวาสคริปต์กับผีสาง

หมายเหตุ: 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 ในสคริปต์

— เคลลี่
แหล่งที่มา

"หมายเหตุ: toggleClass อันหรูหราไม่ทำงานใน Internet Explorer 6"

— Chaoley

43

มีสองวิธีในการเปลี่ยน CSS ภาพพื้นหลังด้วย jQuery

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

ดูอย่างระมัดระวังเพื่อสังเกตความแตกต่าง ในครั้งที่สองคุณสามารถใช้ CSS ธรรมดาและสตริงหลายคุณสมบัติ CSS ด้วยกัน

— Ecropolis
แหล่งที่มา

6

2. ไม่ถูกต้องไม่ถูกต้อง การรวมคุณสมบัติหลาย ๆ อย่างเข้าด้วยกันทำเช่นนี้: $ ('selector') css ({'พื้นหลังสี': 'สีเหลือง', 'พื้นหลังภาพ': 'url ()'})

— codecowboy

ถ้าฉันลอง 2. ฉันได้รับข้อผิดพลาด - Uncaught SyntaxError: โทเค็นที่ไม่คาดคิด:

— geeky_monster

17

หากคุณใช้ CSS sprite สำหรับภาพพื้นหลังคุณสามารถชนพื้นหลังชดเชย +/- nพิกเซลขึ้นอยู่กับว่าคุณกำลังขยายหรือยุบ ไม่ใช่การสลับ แต่ใกล้เคียงกว่าการเปลี่ยน URL ภาพพื้นหลัง

— Dave Ward
แหล่งที่มา

2

โบนัส: หากคุณใช้ภาพแยกเฉพาะภาพที่ปรากฏขึ้นขณะโหลดเท่านั้นที่จะถูกโหลดจริง จะมีความล่าช้าเล็กน้อยเมื่อทำการสลับภาพก่อนที่จะโหลดสถานะที่สอง ด้วยสไปรต์คุณมีเพียงภาพเดียวและจะมีอยู่แล้ว

— Lasar

14

นี่คือวิธีที่ฉันทำ:

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

— Loupax
แหล่งที่มา

ในที่สุดคุณอาจใช้.toggleClass()คุณสมบัติjQuery

— Paulo Bueno

พบข้อมูลเกี่ยวกับ toggleClass สองวันหลังจากที่ฉันโพสต์สิ่งนี้: P

— Loupax

10

วิธีหนึ่งในการทำเช่นนี้คือการใส่รูปภาพทั้งสองไว้ใน 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>

— alexp206
แหล่งที่มา

5

สิ่งนี้ใช้ได้กับเบราว์เซอร์ปัจจุบันทั้งหมดบน WinXP โดยทั่วไปเพียงแค่ตรวจสอบว่าภาพแบ็กกราดด์ปัจจุบันคืออะไร ถ้าเป็น image1 ให้แสดง image2 มิฉะนั้นจะแสดง image1

jsapi เพิ่งโหลด jQuery จาก Google CDN (ง่ายสำหรับการทดสอบไฟล์อื่น ๆ บนเดสก์ท็อป)

การแทนที่มีไว้สำหรับการทำงานร่วมกันข้ามเบราว์เซอร์ (เช่นโอเปร่าและเพิ่มคำพูดใน 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://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>

— enobrev
แหล่งที่มา

1

เพียงแค่ทำมันเพื่อเป็นตัวอย่าง ด้วยวิธีนี้ข้อมูลโค้ดทั้งหมดทำงานได้ด้วยตัวเอง

— enobrev

20

การโหลดจาก Google นั้นเหมาะสำหรับเว็บไซต์สาธารณะ CDN ของ Google น่าจะเร็วกว่าเว็บไซต์ของคุณอนุญาตให้ดาวน์โหลดแบบขนานกับสิ่งอื่นบนเว็บไซต์ของคุณและยิ่งมีไซต์ที่ใช้งานมากเท่าไรก็จะมีการใช้แคชสำเนาจากเบราว์เซอร์ของผู้ใช้มากขึ้น

— Dave Ward

2

หาก Google หยุดทำงานและฉันยังมีชีวิตอยู่ แจ้งให้เราทราบ

— greenimpala

1

@Nick ไปที่ jQuery.com คุณจะพบการใช้งานเว็บไซต์ของตัวเอง<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

— meagar

2

@Nick คำถามควรจริง ๆ ทำไมคุณไม่ต้องการโหลดถ้าออกจาก Google :-)

— John Parker

5

ฉันเป็นการ์ตูน:

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

— yPhil
แหล่งที่มา

4

ฉันใช้การแสดงออกปกติเพราะฉันต้องการที่จะรักษาเส้นทางสัมพัทธ์และไม่ใช้เพิ่มฟังก์ชั่น 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);
                }
            }
        );

— user2220104
แหล่งที่มา

3

โพสต์เก่า แต่สิ่งนี้จะช่วยให้คุณสามารถใช้ภาพสไปรต์และปรับการทำซ้ำเช่นเดียวกับการวางตำแหน่งโดยใช้ชวเลขสำหรับคุณสมบัติ css (พื้นหลังทำซ้ำด้านบนซ้าย)

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

});

— bphillips
แหล่งที่มา

2

ฉันพบวิธีแก้ไขปัญหาในฟอรัมToggle Background Imgแล้ว

— เซบาสเตียนหมาป่า
แหล่งที่มา

ยินดีต้อนรับสู่ Stack Overflow เซบาสเตียน คำถามนี้ถูกถามเมื่อหนึ่งปีก่อนและมีคำตอบที่ยอมรับได้หลายข้อแล้ว

— rjh

2

CSS Sprites ทำงานได้ดีที่สุด ฉันลองสลับคลาสและจัดการคุณสมบัติ 'ภาพพื้นหลัง' ด้วย jQuery ก็ไม่ทำงาน ฉันคิดว่าเป็นเพราะเบราว์เซอร์ (อย่างน้อย Chrome ล่าสุดที่เสถียร) ไม่สามารถ "โหลดซ้ำ" ภาพที่โหลดแล้ว

โบนัส: CSS Sprites นั้นดาวน์โหลดได้เร็วกว่าและเร็วกว่าที่จะแสดง คำขอ HTTP ที่น้อยลงหมายถึงการโหลดหน้าเว็บที่เร็วขึ้น การลดจำนวน HTTP เป็นวิธีที่ดีที่สุดในการปรับปรุงประสิทธิภาพของส่วนหน้าดังนั้นฉันแนะนำให้ใช้เส้นทางนี้ตลอดเวลา

— DjebbZ
แหล่งที่มา

2

นี่คือการตอบสนองที่ค่อนข้างง่ายเปลี่ยนพื้นหลังของเว็บไซต์ด้วยรายการของรายการ

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

ง่าย? มันอาจจะง่ายกว่ามาก ทำไมต้องสุ่ม

— uınbɐɥs

เพราะผู้ใช้ง่ายขึ้นที่จะเห็นสิ่งที่เปลี่ยนพื้นหลังและเปลี่ยน :) ขออภัยภาษาอังกฤษของฉัน

0

ฉันมักจะใช้การประทับเวลาเช่นกันเพื่อป้องกันไม่ให้เบราว์เซอร์แคชภาพ ตัวอย่างเช่นหากผู้ใช้หมุนอวตารของพวกเขามักจะได้รับแคชและดูเหมือนจะไม่เปลี่ยนแปลง

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

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

— AdamVanBuskirk
แหล่งที่มา