title: jquery with on off and click state using images
body: <p>Hi I am trying to do a tri state rollover using jquery. I want an on state  off state and click state.</p>
  
  <p>I have to replicate a specific interface style and not using images in not an option. Below is the code that I have used. However, I cannot seem to figure out how deactivate an image when it another is clicked. </p>
  
  <p>Here is a the scenerio. </p>
  
  <p>1) User hovers over image which activates the on state image. 
  2) User moves off that image and on to another image. THe previous active image is turned off and the the image that is currently hovered over is on. 
  3) The user clicks an image which activates the clicked state image however, when the user clicks another image previously clicked image goes back to the off state. </p>
  
  <p>I am able to do this with Javascript however, I am new to Jquery and having a hard time trying to figure this out. </p>
  
  <p>Here is the code:</p>
  
  <pre><code>$(document).ready(function() {
     // Navigation rollovers
     $("#nav a").mouseover(function(){
          imgsrc = $(this).children("img").attr("src");
          matches = imgsrc.match(/_on/);
          // don't do the rollover if state is already ON
          if (!matches) {
             imgsrcON = imgsrc.replace(/.gif$/ig,"_on.gif");
             // strip off extension
             $(this).children("img").attr("src", imgsrcON);
          }
      });
      $("#nav a").mouseout(function(){
          $(this).children("img").attr("src", imgsrc);
      });
      // Navigation clicks
      $("#nav a").click(function(){
          imgsrc = $(this).children("img").attr("src");
          clkmatches = imgsrc.match(/_on/);
          // don't do the rollover if state is already ON
          if (!clkmatches) {
              imgsrcCLK = imgsrc.replace(/.gif$/ig,"_clk.gif");
              // strip off extension
              $(this).attr("src", imgsrcCLK);
          }
      });     
  });
  </code></pre>