Replace url of background-image with the url of a clicked image with jQuery
<p>When any image in an unordered list is clicked, I would like the url associated with the thumbnail to replace the background-image css value of a particular div. Say,</p>

<pre><code>&lt;ul&gt;
  &lt;li&gt;&lt;a href="dog.jpg"&gt;&lt;img src="dog_thumb.jpg" /&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="cat.jpg"&gt;&lt;img src="cat_thumb.jpg" /&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;div id="background" style="background-image: url('default.jpg')"&gt;&lt;/div&gt;
</code></pre>

<p>When dog_thumb.jpg is clicked, the href attached to it gets put into the css of the div:</p>

<pre><code>&lt;div id="background" style="background-image: url('dog.jpg')"&gt;&lt;/div&gt;
</code></pre>

<p>If cat_thumb.jpg was then clicked, its href would switch with the div's background-image value.</p>

<p>Obviously, I won't use inline styles for the final page. I know how to switch the src of a thumbnail with that of another image on the page or switch between whole classes but, I can't seem to be able to find a way to manipulate just one attribute of a single class. I would like to do it this way because switching the background-image is much easier than having a bunch of divs on top of each other with z-indexes.</p>
