2011-01-31 5 views
0

이미지 목록 (바둑판 식 배경 유형) 이미지를 클릭하여 표시 할 수 있도록 전체 본문의 배경 이미지로 만들고 싶습니다. ..jquery로 배경 이미지 변경하기

$(document).ready(function(){  

    //var image = ???; what should be here? 

    $('.img1').click(function(){ 
     $('#body').css('background-image', 'url(images/tiles/tile77.jpg'); //the image url cannot be one single url 
     }); 

    }); 

(이미지의 단지 이미지는 나중에 데이터베이스에서 오는 것입니다 작업 스크립트를 가져 오는 데 사용되는

<div class="threecol"><img class="img1" src="images/tiles/tile39.jpg"></div> 
<div class="threecol"><img class="img1" src="images/tiles/tile77.jpg"></div> 
<div class="threecol"><img class="img1" src="images/tiles/tile47.jpg"></div> 
<div class="threecol last"><img class="img1" src="images/tiles/tile33.jpg"></div> 

스크립트 내 현재 행이 방식으로 작동합니다 : 지금까지 나는이 있습니다 나는 그것을 가지고 있지만 배경 이미지는 내가 클릭 한 이미지가 아니라 정적 인 이미지가 필요합니다. 이미지를 클릭 할 때마다 작동해야합니다.

나는 그것을 인정합니다. 시간이 흐른 후에 시간을 작동시키는 방법과 .css에서 스크립트를 구성하는 방법에 관해서는 단서가 없습니다 (background-image , ?????) 어떤 조언

답변

4

잡아 당신은 단지에 클릭 이벤트를 트리거 및 설정 .img1 요소의 src 속성

감사 동적 될 그 몸에 당신의 CSS 수정의 URL로 요소 :

$('.img1').click(function(){ 
    $('body').css('background-image', 'url(' + this.src + ')'); 
}); 

또한 오직 문서의 단일 body 요소, 그래서 ID를 통해 선택 단지 대신 $('body')를 사용 할 필요가 있어야한다.

+0

좋아, 나는 네가하는 말을 보았다. 내 body 요소는 body id = "body"입니다. 그게 완벽하게 당신에게 정말 감사했습니다. 이게 쉬운 일은 아닌 것 같아. – Brad