Javascript Hover Bild Ersatz

Question

Ich habe einige Social-Media-Icons, die ich gerne ändern würde, wenn sie über schweben. Ich dachte, der einfachste Weg wäre, das Bild durch ein neues zu ersetzen (es sind kleine PNG-Dateien). Was schlagen Sie vor? Eine dynamische Funktion wäre ideal. Es gibt vier Icons, die jeweils den Dateinamen demo.png, demo_hover.png haben. Ich benutze die jQuery-Bibliothek.

Vielen Dank!

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

Ich würde die sozialen Symbole als background-image auf dem Anker geben (mit display: inline-block;) statt als <img /> Elemente innerhalb des Ankers.

Dann definieren Sie einfach einen a:hover Zustand, der das CSS in einen anderen Hintergrund ändert. Vielleicht sprite sie sogar.

Etwas wie folgt aus:

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

Answer 2

Der einfache Weg ist es die CSS-Art zu tun:

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

Answer 3

Sie sind wahrscheinlich besser mit dem ‚CSS Sprite‘ Methode eher als ein Laden neues Bild ...

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

Answer 4

ich dieses Dilemma nur hatte auch so kam u p mit meiner eigenen Methode. Super einfach, funktioniert super und keine Notwendigkeit für Sprites, sondern nur ein transparentes 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/

Lassen Sie mich wissen, was Sie denken.