jquery hover and click image swap

jquery hover and click image swap

hey guys,

im trying to make a navigation menu, that swaps the image extension _off to _on when its hovered,
and _on to _click when clicked.

for the most part it works fine.
the images swap when hovered
and change when clicked.
However, i want a clicked button to return to the _off position when another button is clicked.
Currently they just all stay on _click when clicked.

any advice would be greatly appreciated guys.
I am a jquery noob!

  1. <script type="text/javascript">
    jQuery(document).ready(function() {
     
    $j("img.rollover").hover(
    function()
    {
    this.src = this.src.replace("_off","_on");
    },
    function()
    {
    this.src = this.src.replace("_on","_off");
    }
    );


    $j("img.rollover").click(
    function()
    {
    this.src = this.src.replace("_on","_click");
    },
    function()
    {
    this.src = this.src.replace("_click","_off");
    }
    );

     
    });
    </script>



























  2. <div id="navigation">
    <ul>
    <li><a href="#introduction"><img class="rollover" src="images/introduction_off.gif" width="81" height="14" border="0" /></a></li>
    <li><a href="#web"><img class="rollover" src="images/web_off.gif" width="24" height="14" border="0" /></a></li>
    <li><a href="#print"><img class="rollover" src="images/print_off.gif" width="33" height="14" border="0" /></a></li>
    <li><a href="#contact"><img class="rollover" src="images/contact_off.gif" width="47" height="14" border="0" /></a></li>
    </ul>
    </div>