Javascript “更改图像”；src"；悬停在潜水舱内

我对javascript和jquery非常陌生，所以我需要一些帮助。 当我悬停每个图像时，如何更改图像src？例如，当我将鼠标悬停在facebook图标上时，它会改变；当我将鼠标悬停在google+image/图标上时，它会改变为我拥有的另一幅图像，等等

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

提前谢谢

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

如果您想保留以前的图像，请使用下面的代码

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

    });
})

---

只是跟进Wisdmlab的答案

这是你的电话号码

这是jQuery

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

下面是一个使用CSS精灵创建的解决方案，NATH正在讨论这个问题。它将减少服务器上的负载，因为CSS精灵将只加载一次，然后它可以用于任何次数的悬停效果

---

这是更新后的工作代码。

HTML部分-

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

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

JavaScript部分-

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

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

功能手柄图像悬停（e）{
如果（e.target.id==“facebook”）{
e、 target.src=“/images/newFacebookImage.png”；
}
如果（e.target.id==“谷歌”）{
e、 target.src=“/images/newGoogleImage.png”；
}
如果（e.target.id==“twitter”）{
e、 target.src=“/images/newwitterimage.png”；
}
如果（e.target.id==“pinterest”）{
e、 target.src=“/images/newPinterestImage.png”；
}
}
var imagesArray=document.getElementsByClassName（“imgRes”）；
对于（img=0；img

这不需要JavaScript/Jquery，这可以通过纯css实现

CSS

.社会偶像a{
宽度：35px；
高度：35px；
显示：内联块；
}
.facebookIcon{
背景图片：url（'images/Facebook.png'）；
}
.facebook图标：悬停{
背景图片：url（'images/FacebookHover.png'）；
}
.谷歌图标{
背景图片：url（'images/Google+.png'）；
}
.谷歌图标：悬停{
背景图片：url（'images/GoogleHover.png'）；
}
.推特图标{
背景图片：url（'images/Tweeter.png'）；
}
.twitter图标：悬停{
背景图片：url（'images/TweeterHover.png'）；
}
宾肯先生{
背景图片：url（'images/Pinterest.png'）；
}
.pinIcon:悬停{
背景图片：url（'images/PinterestHover.png'）；
}

HTML

请将背景图像与图像精灵一起使用，仅为实现滚动效果而附加HTTP请求是愚蠢的。编辑：另外，这将允许您只使用CSS，而不需要JS。是的，我同意@ɴᴀᴛʜ，检查CSS精灵的本教程。