title: jquery change image on mouse rollover
body: <p>I have been having problems with this. I think this should be pretty simple but I cannot seem to get it to work. I want a new image to appear when rolling over my facebook button. Thanks for your help!</p>
  
  <pre><code>    &lt;p align="right"&gt;
            &lt;a href="http://www.facebook.com/AerialistPress" &gt;&lt;img height="30px" id="facebook" class="changePad" alt="Aerialist Press Facebook Page" src="/sites/aerialist.localhost/files/images/facebook300.jpg" /&gt;&lt;/a&gt; 
             &lt;a href="http://twitter.com/#!/AerialistPress" &gt; &lt;img height="30px" class="changePad" alt="Aerialist Press Twitter Page" src="/sites/aerialist.localhost/files/images/twitter300.jpg" /&gt;&lt;/a&gt;
             &lt;a href="http://www.pinterest.com/aerialistpress" &gt;&lt;img height="30px" class="changePad" alt="Aerialist Press Pinterest Page" src="/sites/aerialist.localhost/files/images/pinterest300.jpg" /&gt;&lt;/a&gt;
  &lt;/p&gt;
  
  &lt;script&gt;
  jQuery(document).ready(function(){
       jQuery('#facebook').mouseover(function() { jQuery('#facebook').attr('src').replace('/sites/aerialist.localhost/files/images/facebook-roll.jpg'); })
  
  });
  &lt;/script&gt;
  </code></pre>