title: How do I change images on a jQuery tab when the tab is active?
body: <p>I am using jQuery tabs, and I am using images for each tab instead of text. I would like to change the images when the tab is active. The code for the tabs themselves is:</p>
  
  <pre><code>&lt;ul&gt;
  &lt;li&gt;&lt;a href="#tabs-1"&gt;&lt;img src="images/dashboard_off.gif"/&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#tabs-2"&gt;&lt;img src="images/advertising_off.gif"/&gt;&lt;/a&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#tabs-3"&gt;&lt;img src="images/marketing_off.gif"/&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#tabs-4"&gt;&lt;img src="images/office_off.gif"/&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#tabs-5"&gt;&lt;img src="images/networking_off.gif"/&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#tabs-6"&gt;&lt;img src="images/education_off.gif"/&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I would like to switch those to the "on" version of the image ("images/dashboard_on.gif" and so on).</p>
  
  <p>My script is:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(function(){
      $( "#tabs" ).tabs({
      event: "mouseover"
      });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>Any help would be greatly appreciated! </p>