Change background-image when image clicked

I'll try to make this as specific as possible. I have a set of 9 portfolio icons on my web site. When clicking one -- I would like the "background-image" of a div to change above them. I would preferably like it to fade-in.

This is the code for the portfolio icons:

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

This is the div that I need changed de开发者_如何转开发pending on which icon they click:

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

Any help would be greatly appreciated.

What do you want the background-image to change to?

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

Is the basic syntax. Elaborate a little more and I'll update this.

edit You can store the background-image as an HTML5 'data-' attribute on each icon, like so:

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

And then do the jQuery like this:

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

Fading the images is more complex. You can find a lot of solutions on Google, or hopefully someone will take the time here to show you how.

Fading in backgrounds can indeed be much more complex, but it seems that in your situation you can use a little different approach by simply fading in an absolute positioned div behind the elements in question. This fiddle demonstrates this. Essentially, the necessary jquery is:

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

But of course you'd want to expand that to better handle a list of buttons and fade out previously clicked "backgrounds". You could store the id of the div to fade in a data-bgElementId attribute (or whatever) of the <a> tag, then use that in the click handler:

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

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