title: Checking code change background image with over link with jquery
body: <p>I have this code. 
  The idea is that when the mouse is on hover the link the background-image of a div changes and when is not, shows the original image. I´ll do it with 5 links but at the moment I can´t make it works even whit one.</p>
  
  <p><strong>SCRIPT JQUERY</strong></p>
  
  <pre><code>&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  $(document).ready(function() {
  
      $("#changebg").hover(
      function() {
          //mouse over
          $('.thediv').css('background-image', 'url("www.site.com/img/img2.png")');
      }, function() {
          //mouse out
          $('.thediv').css('background-image', 'url("www.site.com/img/img1.png")');
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>CSS STYLE</strong></p>
  
  <pre><code>.thediv { position: relative; background-image:url('www.site.com/img/img1.png'); }
  </code></pre>
  
  <p><strong>HTML CODE</strong></p>
  
  <pre><code>&lt;div class="thediv"&gt;
  
  &lt;div style="position: absolute;"&gt;
  &lt;a href="#" class="linkstyle" id="changebg"&gt;CHANGE&lt;/a&gt;
  &lt;/div&gt;
  
  
  
  &lt;/div&gt;
  </code></pre>
  
  <p>And an extra... To make the same but with 5 link...
  EX:</p>
  
  <pre><code>&lt;a href="#" class="linkstyle" id="changebg"&gt;CHANGE&lt;/a&gt;
  &lt;a href="#" class="linkstyle" id="changebg1"&gt;CHANGE&lt;/a&gt;
  &lt;a href="#" class="linkstyle" id="changebg2"&gt;CHANGE&lt;/a&gt;
  </code></pre>
  
  <p>...</p>
  
  <p>I have to copy and paste the same code or is there a better form to do it?</p>
  
  <p>Thanks a lot :D</p>
  
  <p>Have a great start of week.</p>