title: Save and load background with javascript
body: <p>This is the code I have on my website: you can see a <code>select</code> with a dropdown list that has a few options. When an option is clicked, a background will be loaded with the <code>onchange()</code> event.</p>
  
  <pre><code>&lt;select id="rds" onchange="bg(this[this.selectedIndex].value);"&gt;
      &lt;option value="0.png"&gt;1. Default&lt;/option&gt;
      &lt;option value="1.png"&gt;2. Collage&lt;/option&gt;
      &lt;option value="2.jpg"&gt;3. Darkness&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>And here the <code>bg()</code> function: </p>
  
  <pre><code>function bg(num) {
      document.body.style.backgroundImage = "url(http://mk7vrlist.altervista.org/backgrounds/" + num + ")";
  }
  </code></pre>
  
  <p>This works perfectly. I have to save the option that an user selected, so every time he opens the webpage, he can see the background he selected. </p>
  
  <p>I was thinking to save a <code>cookie</code> and load it. Since I saw that it's a bit tricky with javascript, I thought I could use <code>jQuery</code> and so I made this:</p>
  
  <pre><code>&lt;select id="rds" onchange="bg(this[this.selectedIndex].value); $.cookie("example", this[this.selectedIndex].value, {expires: 7});"&gt;
      &lt;option value="0.png"&gt;1. Default&lt;/option&gt;
      &lt;option value="1.png"&gt;2. Collage&lt;/option&gt;
      &lt;option value="2.jpg"&gt;3. Darkness&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>The cookie is not saving and Mozilla tells me <code>SyntaxError: syntax error</code>. How could I fix this problem?</p>
  
  <p>I've included the jQuery file in this way:</p>
  
  <pre><code>&lt;script type="text/javascript" src="http://mk7vrlist.altervista.org/jquery-1.10.2.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>How can I load the background once I saved the cookie? I have to call the <code>bg()</code> function but I don't know how to do it.</p>