How do I change images on a jQuery tab when the tab is active?
===

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:

    <ul>
    <li><a href="#tabs-1"><img src="images/dashboard_off.gif"/></a></li>
    <li><a href="#tabs-2"><img src="images/advertising_off.gif"/></a></a></li>
    <li><a href="#tabs-3"><img src="images/marketing_off.gif"/></a></li>
    <li><a href="#tabs-4"><img src="images/office_off.gif"/></a></li>
    <li><a href="#tabs-5"><img src="images/networking_off.gif"/></a></li>
    <li><a href="#tabs-6"><img src="images/education_off.gif"/></a></li>
    </ul>

I would like to switch those to the "on" version of the image ("images/dashboard_on.gif" and so on).

My script is:

    <script type="text/javascript">
    $(function(){
        $( "#tabs" ).tabs({
        event: "mouseover"
        });
        });
    </script>


Any help would be greatly appreciated! 