title: Change DIV Background on rollover with Jquery
body: <p>I am very new to JQuery but already like it a lot.</p>
  
  <p>I am trying to change a background of a div when the user rollsovers it. But I can not get the bg to update. So far this is what I have:</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;Untitled Document&lt;/title&gt;
  &lt;style&gt;
  #fish{background-image:url(images/fish_off.jpg);width:459px;height:474px;}
  &lt;/style&gt;
  
   &lt;script type="text/javascript" src="javascript/jquery.js"&gt;&lt;/script&gt;     
  
   &lt;script type="text/javascript"&gt;                                         
  $('#fish').hover(
    function(){$('#fish').css({background: "url(images/fish_on.jpg)"})},
    function(){$('#fish').css({background: "url(images/fish_off.jpg)"})}
  );
  
  
   &lt;/script&gt;      
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div id="fish"&gt;&lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is my test page and based off the info below I am still having issues:</p>
  
  <p><a href="http://www.2020mediaonline.com/lptest/index2.html" rel="nofollow">Test Page</a></p>