jquery change image on mouse rollover

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>

Andrew Craswell · Accepted Answer · 2012-10-24 22:50:58Z

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');

edited Oct 24, 2012 at 22:50

answered Oct 24, 2012 at 22:44

Andrew Craswell

6741 gold badge9 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Madbreaks · Accepted Answer · 2012-10-24 22:40:38Z

0

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

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

answered Oct 24, 2012 at 22:40

Madbreaks

19.6k7 gold badges62 silver badges75 bronze badges

1 Comment

Craig Rinde Over a year ago

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?

Grzegorz · Accepted Answer · 2012-10-24 22:43:23Z

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')

answered Oct 24, 2012 at 22:43

Grzegorz

3,3753 gold badges27 silver badges45 bronze badges

2 Comments

Craig Rinde Over a year ago

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?

Grzegorz Over a year ago

stackoverflow.com/questions/5589382/…

djphinesse · Accepted Answer · 2012-10-24 22:57:03Z

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');
});

answered Oct 24, 2012 at 22:57

djphinesse

9781 gold badge7 silver badges13 bronze badges

Comments

Jarry Bruckheimer · Accepted Answer · 2012-10-24 23:20:24Z

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" />

edited Oct 24, 2012 at 23:20

answered Oct 24, 2012 at 23:11

Jarry Bruckheimer

276 bronze badges

Collectives™ on Stack Overflow

jquery change image on mouse rollover

5 Answers 5

Comments

1 Comment

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related