Question

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 align="right">
          <a href="http://www.facebook.com/AerialistPress" ><img height="30px" id="facebook" class="changePad" alt="Aerialist Press Facebook Page" src="/sites/aerialist.localhost/files/images/facebook300.jpg" /></a> 
           <a href="http://twitter.com/#!/AerialistPress" > <img height="30px" class="changePad" alt="Aerialist Press Twitter Page" src="/sites/aerialist.localhost/files/images/twitter300.jpg" /></a>
           <a href="http://www.pinterest.com/aerialistpress" ><img height="30px" class="changePad" alt="Aerialist Press Pinterest Page" src="/sites/aerialist.localhost/files/images/pinterest300.jpg" /></a>
</p>

<script>
jQuery(document).ready(function(){
     jQuery('#facebook').mouseover(function() { jQuery('#facebook').attr('src').replace('/sites/aerialist.localhost/files/images/facebook-roll.jpg'); })

});
</script>

Answer 1

The attr method returns the value of the property specified (in this case, ‘src’), and the replace is trying to modify the string and return a new instance. However, you’re not doing anything with the new instance.

To set the attribute you must pass an additional parameter to the attr method.

Here’s the documentation for the attr method:
http://api.jquery.com/attr/

Your code should be:

jQuery('#facebook').attr('src', '/sites/aerialist.localhost/files/images/facebook-roll.jpg');