Bonsoir,

Faire une recherche sur les termes sprites, rollover et pour l'effet de "défilement" voir du coté de la propriété transition (CSS3) et/ou via javascript.
Il y a des choses intéressantes dans la section Apprendre de ce site, sur le net également, ainsi que dans la feuille de styles de l'exemple que tu cites Smiley cligne

Cdt,
Sylvain
J'ai chercher, j'ai bien ca pour le moment

<a href="#"><img src="images/youtube.png" alt="Image" onmouseover="javascript:this.src='images/youtube-nb.png';" onmouseout="javascript:this.src='images/youtube.png';" /></a>


Mais je n'est pas trouver pour le défilement.
Regarde avec un inspecteur de code. C'est des sprites avec des animations CSS 3 comme te l'a indiqué @6l20.

il faudra mettre l'image via le style.