0

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>
Craig Rinde
  • 95
  • 1
  • 2
  • 8

5 Answers5

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');
Andrew Craswell
  • 674
  • 1
  • 6
  • 17
0

Don't use replace, just set the src attr directly:

jQuery('#facebook').attr('src', '/sites/aerialist.localhost/files/images/facebook-roll.jpg');
Madbreaks
  • 19,094
  • 7
  • 58
  • 72
  • Thanks! it changes but then when i move the mouse out it stays the same. Is there a way to get it to change back on mouse out? – Craig Rinde Oct 24 '12 at 22:45
0

Change

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

to

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

You can also use $('#facebook') instead of $('#facebook')

Grzegorz
  • 3,207
  • 3
  • 20
  • 43
  • Thanks! it changes but then when i move the mouse out it stays the same. Is there a way to get it to change back on mouse out? – Craig Rinde Oct 24 '12 at 22:44
  • http://stackoverflow.com/questions/5589382/jquery-changing-the-src-of-another-image-on-rollover – Grzegorz Oct 24 '12 at 22:46
0

Here ya go!

$("#img").hover(function(){
//mouseover
     $(this).attr('src', 'https://twimg0-a.akamaihd.net/profile_images/1768071248/smile_normal.jpg'); 
    },
    function(){
//mouseout
    $(this).attr('src', 'http://www.bestfreeicons.com/smimages/Emotes-face-smile-icon.png');
});​
djphinesse
  • 969
  • 1
  • 7
  • 13
0

This works

<script type ="text/javascript">

 $(document).ready(function(){
 $('#facebook').mouseenter(function() { 
     $('#facebook').attr("src","heretheotherimage.png"); 
 })

 $('#facebook').mouseleave(function() { 
     $('#facebook').attr("src","heretheimage.png"); 
 })

 });
 </script>

 <img src ="heretheimage.png" id ="facebook" />
Jarry Bruckheimer
  • 17
  • 6