當點擊圖片時更改背景圖片

Question

我會盡量使其儘可能具體。我的網站上有一套9個投資組合圖標。當點擊一個 - 我想要一個div的「背景圖像」改變它們。我最好喜歡它淡入。

這是組合圖標代碼：

<ul class="gallery"> 
    <li><a href="#" class="thumb"><span><img src="images/work-icon-1.jpg" alt="" /></span></a></li> 
    <li><a href="#" class="thumb"><span><img src="images/work-icon-2.jpg" alt="" /></span></a></li> 
    <li><a href="#" class="thumb"><span><img src="images/work-icon-3.jpg" alt="" /></span></a></li> 
    <li><a href="#" class="thumb"><span><img src="images/work-icon-4.jpg" alt="" /></span></a></li> 
    <li><a href="#" class="thumb"><span><img src="images/work-icon-5.jpg" alt="" /></span></a></li> 
    <li><a href="#" class="thumb"><span><img src="images/work-icon-6.jpg" alt="" /></span></a></li> 
    <li><a href="#" class="thumb"><span><img src="images/work-icon-7.jpg" alt="" /></span></a></li> 
    <li><a href="#" class="thumb"><span><img src="images/work-icon-8.jpg" alt="" /></span></a></li> 
    <li><a href="#" class="thumb"><span><img src="images/work-icon-9.jpg" alt="" /></span></a></li> 
</ul> 

這是我需要的，這取決於更改圖標點擊它們在div：

<div class="work-header"></div> 

任何幫助將不勝感激。

Answer 1

你想讓背景圖像變爲？

$('.thumb').click(function() { 
    $('#word-header').css('background-image', 'url("img.jpg")'); 
}); 

是基本語法。詳細闡述一下，我會更新它。

編輯可以作爲HTML5 '數據 - ' 屬性背景圖像存儲在每個圖標，就像這樣：

<img src="images/work-icon-1.jpg" alt="" data-header-img="images/header-1.jpg" /> 

然後做jQuery的是這樣的：

$('.thumb').click(function() { 
    $('#word-header').css('background-image', "url("+$(this).attr('data-header-img')+")"); 
}); 

褪色的圖像更復雜。你可以在Google上找到很多解決方案，或者希望有人會花時間在這裏向你展示如何。

Answer 2

衰退背景確實可能要複雜得多，但似乎在您的情況下，您可以使用一種不同的方法，只需簡單地淡化所討論元素背後的絕對定位div即可。 This fiddle演示了這一點。從本質上講，必要的jQuery是：

$("#btn1").click(function() { 
    $("#img1").fadeIn(1000); 
    return false; 
}); 

但是，當然，你要展開以更好地處理按鈕的列表和淡出以前單擊「背景」。你可以存儲的div id來在<a>標籤的data-bgElementId屬性（或其他）褪色，然後使用該單擊處理程序：

$(".thumb").click(function() { 
    var bgElementId = $(this).attr("data-bgElementId"), 
     bgElement = $("#" + bgElementId); 

    bgElement.fadeIn(1000); 
    $(".allBGs").not(bgElement).fadeOut(1000); 
    return false; 
});