title: jquery slider to change body background
body: <p>I want to include a mini menu 20px by 20px images of potential backgrounds.
  When a user clicks on one them the body background image will change and the selection saved as the users choice.</p>
  
  <p>I've thought of using a slider but I don't know how I would be able to have the images in a <code>li</code> and be able to change the body css based on the selection.</p>
  
  <p>Any ideas?</p>
  
  <p>Happy July 4th</p>
  
  <p>EDIT
  i am trying to save the img url in that cookie, its not working tho, its saving in the cookie but its not retrieving the cookie content</p>
  
  <p>EDIT
  the below works, !!!!!!! but the background color is always white even if i add 
  a  <code>$("html").css("background-color","red");</code></p>
  
  <p>FIX, added color at the end of the url </p>
  
  <pre><code>$("html").css("background", "url('" + imgCookieLink + "') no-repeat fixed center top #343837"); 
  
  
  $(document).ready(function() {
  $("#BGSelector a").click(function() {
      var imgLink = $("img", this).attr("src");
      $.cookie("html_img", "" + imgLink + "", { expires: 7 });
      var imgCookieLink = $.cookie("html_img");
      $("html").css("background", "url('" + imgCookieLink + "')");
  });
  });
  
  &lt;script type="text/javascript"&gt;
  $(document).ready(function() { 
      $("#BGSelector a").click(function() {
         var imgLink = $("img", this).attr("src");
         $.cookie("html_img", "" + imgLink + "", { path: '/vitamovie', expires: 7 });
         var imgCookieLink = $.cookie("html_img");       
         $("html").css("background", "url('" + imgCookieLink + "') no-repeat fixed center    top"); 
      }); 
   });
  
  &lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  $(document).ready(function() {   
         var imgCookieLink = $.cookie("html_img");  
         $("html").css("background", "url('" + imgCookieLink + "') no-repeat fixed center top");
  
   });
  
  &lt;/script&gt;
  </code></pre>