Change background-image when image clicked
<p>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.</p>

<p>This is the code for the portfolio icons:</p>

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

<p>This is the div that I need changed depending on which icon they click:</p>

<pre><code>&lt;div class="work-header"&gt;&lt;/div&gt;
</code></pre>

<p>Any help would be greatly appreciated.</p>
