title: Jquery change image on rollover with fade
body: <p>I'm currently using the script below to change an image on rollover. There are many images that this effect needs to be applied to -  each image has its own rollover image. The script works for the rollover, but not for the fade. </p>
  
  <p>I've read about using CSS and jquery for the fade effect: <a href="http://jqueryfordesigners.com/image-cross-fade-transition/" rel="nofollow">http://jqueryfordesigners.com/image-cross-fade-transition/</a></p>
  
  <p>But it would be a real pain having to write the CSS for over 100 different images! I was just wondering if anyone knows what I'm doing wrong and how to make the script work? :)</p>
  
  <pre><code>$(function () {
  $("img.rollover").hover(function () {
      this.src = this.src.replace("_off", "_on")
  }, function () {
      this.src = this.src.replace("_on", "_off")
  })
  });
  
  
  $("a img").hover(function () {
      jQuery(this).stop().fadeTo("fast", 0.5);
  }, function () {
      jQuery(this).stop().fadeTo("fast", 1);
  });
  </code></pre>