jQuery로 DIV 배경 이미지 전환

207

내가 일하는 회사의 확장 / 축소 통화 요금표를 만들고 있습니다. 현재 확장 할 수있는 버튼이있는 테이블이 있는데 버튼에 "확장"이라고 표시되어 있습니다. 버튼을 클릭 할 때 "Collapse"로 변경 한 다음 다시 클릭하면 "Expand"로 돌아가는 버튼을 제외하고는 기능적입니다. 버튼의 글은 배경 이미지입니다.

따라서 기본적으로 필요한 것은 div를 클릭 할 때 div의 배경 이미지를 변경하는 것입니다.

jquery

— zuk1
소스

3

왜 배경 이미지입니까? 왜 문자를 하지 않습니까?

— uınbɐɥs

1

그는 몇 년 전부터 대답을 받아들이지 않았기 때문에 투표에 참여했습니다. @ user1040899를 통해 괜찮습니다.

— gsamaras

@ user1040899 zuk1 마지막으로 볼 Aug 9 '10 at 0:42에 SO 어쩌면의 이유 :(

— M. Junaid Salaat

443

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

트릭을 수행하려면 요소의 클릭 이벤트에 연결하십시오.

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

— 새긴 금
소스

@ fuccboi 사용자가 옵션을 선택할 때이 코드를 사용하여 애니메이션 svg 확인 표시를 해제하기 때문에 그렇게합니다. :)

— norcal johnny

당신이 강한 타입 정의 언어에서 오는 경우 정말 혼란 문자열 <<의 일환 좋은 answere, 내가) (>> 아웃 URL을 지점을 원하는 IS

— clockw0rk을

62

개인적으로 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');
            }
        });
    }

내가 아는 한이 방법은 브라우저에서 작동하며 스크립트의 URL 변경보다 CSS와 클래스를 사용하는 것이 훨씬 편안합니다.

— 켈리
소스

"참고 : Internet Explorer 6에서는 우아한 toggleClass가 작동하지 않습니다"

— Chaoley

43

jQuery를 사용하여 배경 이미지 CSS를 변경하는 방법에는 두 가지가 있습니다.

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

차이점을주의해서 살펴보십시오. 두 번째로 일반적인 CSS와 문자열 여러 CSS 속성을 함께 사용할 수 있습니다.

— 에크로 폴리스
소스

6

2. 잘못된 잘못된입니다. 여러 속성을 함께 묶는 방법은 다음과 같습니다. $ ( 'selector'). css ({ 'background-color': 'yellow', 'background-image': 'url ()'})

— codecowboy

2를 시도하면 오류가 발생합니다

— -Uncaught

17

배경 이미지에 CSS 스프라이트를 사용하는 경우 확장 또는 축소 여부에 따라 배경 오프셋 +/- n 픽셀을 충돌시킬 수 있습니다. 토글은 아니지만 배경 이미지 URL을 전환하는 것보다 더 가깝습니다.

— 데이브 워드
소스

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

— 루 팩스
소스

결국 jQuery .toggleClass()기능을 사용할 수 있습니다 .

— Paulo Bueno

내가 이것을 게시하고 이틀 후 toggleClass에 대해 알아 냈습니다 : P

— Loupax

10

이를 수행하는 한 가지 방법은 SPAN 또는 DIV 내부의 HTML에 두 이미지를 모두 넣는 것입니다. 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의 모든 현재 브라우저에서 작동합니다. 기본적으로 현재 backgrond 이미지가 무엇인지 확인하십시오. image1이면 image2를 표시하고, 그렇지 않으면 image1을 표시하십시오.

jsapi 항목은 Google CDN에서 jQuery를로드합니다 (데스크톱에서 기타 파일을 테스트하기가 더 쉽습니다).

대체는 브라우저 간 호환성을위한 것입니다 (예 : URL에 따옴표를 추가하고 Firefox, chrome 및 safari는 따옴표를 제거합니다).

<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에서로드하는 것이 좋습니다. Google의 CDN은 사이트보다 훨씬 빠르며 사이트의 다른 사이트와 병렬로 다운로드 할 수 있으며이 사이트를 사용하는 사이트가 많을수록 사용자 브라우저의 캐시 된 사본이 사용될 가능성이 높습니다.

— Dave Ward

2

Google이 다운 되어도 여전히 살아 있다면; 알려주세요.

— greenimpala

1

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

— @Nick

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

— 아이필
소스

4

상대 경로를 유지하고 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);
                }
            }
        );

— 사용자
소스

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 솔루션을 찾았습니다 .

— 세바스찬 울프
소스

Sebastian, Stack Overflow에 오신 것을 환영합니다. 이 질문은 1 년 전에 요청되었으며 이미 몇 가지 수용 가능한 답변이 있습니다.

— rjh

2

CSS 스프라이트가 가장 효과적입니다. jQuery를 사용하여 클래스를 전환하고 'background-image'속성을 조작하려고 시도했지만 아무것도 작동하지 않았습니다. 브라우저 (최신 안정적인 Chrome)는 이미로드 된 이미지를 "다시로드"할 수 없기 때문이라고 생각합니다.

보너스 : CSS Sprite는 다운로드 및 표시 속도가 빠릅니다. 적은 HTTP 요청은 더 빠른 페이지로드를 의미합니다. 프런트 엔드 성능을 향상시키는 가장 좋은 방법 은 HTTP 수를 줄이는 것이기 때문에이 경로를 항상 사용하는 것이 좋습니다.

— je 즈
소스

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