jQuery image switcher
<p>I'm getting lost reading countless js code hints etc and I'm finding it hard to know where to start. Help!</p>

<p>So basically I have a main full screen background image in css on the main div and I have list items with small thumbnails, when they are clicked they are switched to create a new large background in the main div.</p>

<p>html</p>

<pre><code>&lt;div id="main"&gt;
&lt;ul id="thumbs"&gt;
&lt;li&gt;&lt;a href="#"&gt;&lt;img src="img1/goes/here.png" /&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;&lt;img src="img2/goes/here.png" /&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;&lt;img src="img3/goes/here.png" /&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;&lt;img src="img4/goes/here.png" /&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<p>css</p>

<pre><code>#main{background-image: url(../bkg-img/goes/here.png)}}
</code></pre>

<p>Sorry for being a nooblet, thanks for the help.</p>

<p>===== Solved ======</p>

<p>I managed to solve it in the end using the data-header-img attribute.</p>

<p>html</p>

<pre><code>&lt;div id="main"&gt;
&lt;ul&gt;
&lt;li&gt;
  &lt;a href="#"&gt;
    &lt;img class="thumb" src="img1/goes/here.png" width="x" height="x" data-header-img="img1/goes/here.png" /&gt;
  &lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
  &lt;a href="#"&gt;
    &lt;img class="thumb" src="img2/goes/here.png" width="x" height="x" data-header-img="img2/goes/here.png" /&gt;
  &lt;/a&gt;
&lt;/li&gt;
etc..
&lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<p>js</p>

<pre><code>$('.thumb').click(function() {
  $('#main').css('background-image', "url("+$(this).attr('data-header-img')+")");
});
</code></pre>

<p>Thanks all the for the input and advice. Y.</p>
