Change image source and folder on hover and click - jQuery
<p>Morning folks. I have an interactive gallery in mind, whereby a user hovers over a colour and the image changes to that colour. There is also another option where they can click a seperate option.</p>

<p>I have 8 folders, each with 21 colours inside them. My logic is that you hover over a colour, and the image source changes, then you click one of the options and the folder changes. Each image in the folder has the same image name.</p>

<p>Here's my attempt:</p>

<pre><code>'   &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;title&gt;test&lt;/title&gt;
&lt;style type="text/css"&gt;
p   {float:left; padding:6px; background:#CCC; border:1px solid #666; cursor:pointer; margin:0 10px 10px 0; border-radius:6px; }
img {display:block; clear:both; }
&lt;/style&gt;
&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"&gt;&lt;/script&gt;

&lt;script type="text/javascript"&gt;
$(document).ready(function(){
    imgFldr = 'chrome';

    $('p#white').hover(function(){
        $("#pic").attr("src",imgFldr+"/white.png");
    });
    $('p#blue').hover(function(){
        $("#pic").attr("src",imgFldr+"/blue.png");
    });
    $('p#black').hover(function(){
        $("#pic").attr("src",imgFldr+"/black.png");
    });
    $('p#red').hover(function(){
        $("#pic").attr("src",imgFldr+"/red.png");
    });
    $('p#green').hover(function(){
        $("#pic").attr("src",imgFldr+"/green.png");
    });

    //click the handle buttons
    $('p#chrome').click(function(){
        $("#pic").imgFldr='chrome'.attr("src");
    });
    $('p#black').click(function(){
        $("#pic").imgFldr='black'.attr("src");
    });
    $('p#gold').click(function(){
        $("#pic").imgFldr='gold'.attr("src");
    });

});
&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
colour
&lt;p id="white"&gt;white&lt;/p&gt;
&lt;p id="blue"&gt;blue&lt;/p&gt;
&lt;p id="black"&gt;black&lt;/p&gt;
&lt;p id="red"&gt;red&lt;/p&gt;
&lt;p id="green"&gt;green&lt;/p&gt;
&lt;img id="pic" src="chrome/red.png" /&gt;
handle
&lt;p id="chrome"&gt;chrome&lt;/p&gt;
&lt;p id="black"&gt;black&lt;/p&gt;
&lt;p id="gold"&gt;gold&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;'
</code></pre>

<p>As you can see, hovering over the colour buttons, the image changes succesfully, but on clicking the other buttons, nothing changes but I'd like the folder to change, not the image name, is this possible with jQuery using the code I have?</p>
