title: Jquery Image Switch
body: <p>I am using an image switch function in Jquery for a site I am building. There are a ton of projects so I am heavily compressing a lot of these images. Some of them however dont look nice as .gifs and it really only makes sense to make a .jpg.</p>
  
  <p>My problem is that this code only swaps one image, to another image of a different name but similar prefix. Is there a way to swap just the name of the file, so that if I have a .gif, or .jpg, it wouldn't matter as it would just be swapping the name from _static to _rollover?</p>
  
  <p>Here is the code I am using:</p>
  
  <pre><code>//Image Switch
  $(document).ready(function(){
      $(".projectThumb img").hover(
              function(){
                      var iconName = $(this).attr("src");
                      var origin = iconName.split("_static.")[0];
                      $(this).attr({src: "" + origin + "_rollover.gif"});
              }, 
              function(){
                      var iconName = $(this).attr("src");
                      var origin = iconName.split("_rollover.")[0];
                      $(this).attr({src: "" + origin + "_static.gif"});
              });
  });
  </code></pre>
  
  <p>and the HTML for the image switch</p>
  
  <pre><code>&lt;div class="projectThumb"&gt;
      &lt;img src="/img/mr_button_static.gif" class="button" name="mr"&gt;
      &lt;p class="title"&gt;Title &amp;ndash; Poster&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The image to be switched is named <code>/img/mr_button_rollover.jpg</code>  </p>
  
  <p>Thanks!</p>