Javascript悬停图片替换

Question

我有一些社交媒体图标,我想在它们徘徊时改变颜色.我认为最简单的方法是用新的替换图像(它们是小的png文件).你有什么建议？动态函数是理想的..有四个图标,每个图标的文件名为demo.png,demo_hover.png.我正在使用jQuery库.

谢谢!

HTML

  <a class="a" id="interscope_icon" href="http://www.interscope.com/" alt="Interscope Records" target="_blank"><img class="icon" id="interscope" src="../Images/icons/interscope.png" alt="Interscope Records" /></a>
  <a class="a" href="http://www.twitter.com/FernandoGaribay" alt="Twitter" target="_blank"><img class="icon" id="twitter" src="../Images/icons/twitter.png" alt="Fernando Garibay's Twitter" /></a>
</p>
<p>
  <a class="a" href="http://www.facebook.com/f2inc" alt="Facebook" target="_blank"><img class="icon" id="facebook" src="../Images/icons/facebook.png" alt="Fernando Garibay's Facebook" /></a>
  <a class="a" href="http://www.myspace.com/f2inc" alt="Myspace" target="_blank"><img class="icon" id="myspace" src="../Images/icons/myspace.png" alt="Fernando Garibay's Myspace" /></a>
</p>

jQuery的

$('#interscope_icon').hover(function(){
  $('#interscope').attr('src', 'Images/icons/interscope.png');
});

Answer 1

您可能最好使用'CSS sprite'方法而不是加载新图像...

http://css-tricks.com/css-sprites/