La meilleure façon de faire des rotations d'images ?

Question

Je veux que mon logo principal change lorsque l'on passe la souris dessus.

Je crois savoir qu'il existe plusieurs façons d'y parvenir et je me demandais quelle était la meilleure solution en termes de stabilité, de compatibilité avec les navigateurs, d'efficacité et de facilité d'installation.

Voici quelques moyens que j'ai trouvés :

• Remplacement de l'attribut "src" par Javascript (jQuery).
• CSS utilisant les arrière-plans et le "hover" (survol)

D'autres ? Qu'est-ce qui est le mieux ?

Answer 1

Renversements d'images à l'aide de "sprites". Lister une partie - sprites CSS

Answer 2

Utilisez les sprites CSS et la psuedo-classe :hover en CSS. Voici pourquoi :

1. Le changement de source de l'image, que ce soit par le biais de JS ou de CSS, provoquera un "clignotement" au premier passage de la souris, le temps que la nouvelle image soit téléchargée par le navigateur. Si vous utilisez le sprite, c'est une seule image qui change de position, donc pas de clignotement.

2. Une seule image réduit les requêtes HTTP, ce qui accélère le chargement du site en général.

3. Il fonctionne si l'utilisateur a désactivé JavaScript.

4. Il est pris en charge par tous les types de navigateurs (de bureau, en tout cas, les navigateurs de téléphone sans état :hover ne comptent pas pour cela).

Plus d'informations : http://css-tricks.com/css-sprites/

Answer 3

$('#div1').hover(function(){
  this.style.color='white';
},function(){
 this.style.color='black;
});

ou

$('#div1').onmouseover()...
$('#div1').onmouseout()...