Javascript hover image replacement

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

Я хотел бы дать социальные иконки как background-image на якорях (с display: inline-block;), а не как <img /> элементов внутри якорей.

Затем просто укажите состояние a:hover, которое изменяет CSS на другой фон. Возможно, даже спрайте их.

Что-то вроде этого:

#some_id { background-image: url(...); } 
#some_id:hover { background-image: url(...); } 

Answer 2

Самый простой способ это сделать это CSS путь:

#interscope_icon { background-image: url(...) } 
#interscope_icon:hover { background-image: url(...) } 

Answer 3

Вы, вероятно, лучше использовать метод «CSS спрайтов» вместо загрузки новый образ ...

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

Answer 4

Я только что эту дилемму, а так пришел U p с моим собственным методом. Супер легкая, не работает отлично и нет необходимости для спрайтов, просто прозрачный PNG:

HTML:

<div class="facebookicon"> 
    <a href="#!"><img src="http://example.com/some.png"></a> 
</div> 

CSS:

.facebookicon img { 
    background: #fff; 
    transition: background 400ms ease-out; 
} 

.facebookicon img:hover { 
    background: #3CC; 
    transition: background 400ms ease-in; 
} 
/* you need to add various browser prefixes to transition */ 
/* stripped for brevity */ 

http://jsfiddle.net/mattmagi/MpxBd/

Позвольте мне знать, что вы думаете.