当点击图片时更改背景图片

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