Change images "src" on hover, inside a div

Question

I am very new to javascript and jquery so I could use some help. How can I change the image src when I hover every image? For example when I hover the facebook-icon it changes, when I hover google+ image/icon it changes to another image that i have etc.

<div class="social-icons wrapper-social">

     <a href="#" target="_blank">
          <img id="facebook" src="images/Facebook.png" />
     </a>

     <a href="#" target="_blank"> 
          <img id="google" src="images/Google+.png" />
     </a>

     <a href="#" target="_blank">
       <img id="twitter" src="images/Tweeter.png" />
     </a>

      <a href="#" target="_blank">
          <img id="pinterest" src="images/Pinterest.png" />
      </a>

</div>

Thanks in advance!

Answer 1

$(document).ready(function() {
    $("#facebook").hover(function() {
        $(this).attr("src","new src");
    });
});

If you want to retain previous image then use below code

var old_src="";
$(document).ready(function() {
    $("#facebook").mouseover(function() {
        old_src = $(this).attr("src");
        $(this).attr("src","new src");
    }).mouseout(function() {
         $(this).attr("src",old_src);

    });
})

Answer 2

Just following up on WisdmLabs answer.

Here is the DEMO

Here is the jQuery

$(document).ready(function(){
  $("#facebook").hover(function(){
     $(this).attr("src","New src");
    },function(){
    $(this).attr("src","Original src");
  });
});

Here is a solution created using CSS sprites which NATH was talking about. It will reduce the load on the sever as the CSS sprite will be loaded only once and then it can be used any number of times for your hover effects.

CSS Sprite DEMO

Answer 3

Here is the updated and working code.

HTML Part-

<div class="social-icons wrapper-social">
    <a href="#" target="_blank">
        <img class="imgRes" id="facebook" src="images/Facebook.png" />
    </a>
    <a href="#" target="_blank"> 
        <img class="imgRes" id="google" src="images/Google+.png" />
    </a>
    <a href="#" target="_blank">
        <img class="imgRes" id="twitter" src="images/Tweeter.png" />
    </a>
    <a href="#" target="_blank">
        <img class="imgRes" id="pinterest" src="images/Pinterest.png" />
    </a>
</div>

JavaScript Part-

function handleImageHover(e) {
    if(e.target.id == "facebook") {
        e.target.src = "/images/newFacebookImage.png";
    }
    if(e.target.id == "google") {
        e.target.src = "/images/newGoogleImage.png";
    }
    if(e.target.id == "twitter") {
        e.target.src = "/images/newTwitterImage.png";
    }
    if(e.target.id == "pinterest") {
        e.target.src = "/images/newPinterestImage.png";
    }

}
var imagesArray = document.getElementsByClassName("imgRes");
for (img = 0; img < imagesArray.length; img++) { 
    imagesArray[img].addEventListener("mouseover", handleImageHover, false);
}

Answer 4

There is no need of JavaScript/Jquery for this, this can be achieved by pure css.

CSS

<style type="text/css">
.social-icons a{
    width: 35px;
    height: 35px;
    display: inline-block;
}
.facebookIcon {
    background-image:url('images/Facebook.png');
}
.facebookIcon:hover {
    background-image:url('images/FacebookHover.png');
}
.googleIcon {
    background-image:url('images/Google+.png');
}
.googleIcon:hover {
    background-image:url('images/GoogleHover.png');
}
.twitterIcon {
    background-image:url('images/Tweeter.png');
}
.twitterIcon:hover {
    background-image:url('images/TweeterHover.png');
}
.pinIcon {
    background-image:url('images/Pinterest.png');
}
.pinIcon:hover {
    background-image:url('images/PinterestHover.png');
}
</style>

HTML

<div class="social-icons wrapper-social">

    <a href="#" target="_blank" class="facebookIcon">

    </a>

    <a href="#" target="_blank" class="googleIcon">
    </a>

    <a href="#" target="_blank" class="twitterIcon">
    </a>

    <a href="#" target="_blank" class="pinIcon">
    </a>

</div>