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 /

Answer 2

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

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

Answer 3

У меня тоже была эта дилемма, поэтому я придумал свой метод.Супер просто, отлично работает и не требует спрайтов, просто прозрачный 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/

Дайте мне знать, что вы думаете.

Answer 4

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

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

Как то так:

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