Image roll-over facile avec jQuery

By 21 novembre 2011Javascript/jQuery, Tutoriels

Solution en « pure css »

Préparez d’abord une image contenant les 2 états du bouton (off en haut et on en bas). Dans notre exemple, le bouton fait 32px de côté, donc il nous faut une image de 32 x 64 pixels. Pour le principe, on se contente simplement de repositionner l’image de fond.
Placez le code suivant dans le head de votre page html.

.rollover {
  height: 32px;
  width: 32px;
  float: left;
  background: url(bouton.png) no-repeat;
}
a.rollover:link {
  text-decoration: none;
  display: block;
}
a.rollover:hover {
  background-position: left bottom;
}

Code html pour afficher le bouton :

<a href="#" class="rollover"></a>

Solution en jQuery avec 2 images

Cette solution nécessite 2 images (le bouton off et le bouton on). Placez le code suivant dans le head de votre page :

$(document).ready(function(){
  $(function () {
    $('img.echange').hover(function () {
      $(this).css("cursor", "pointer");
      this.src = 'images/on.png';
    }, function () {
      this.src = 'images/off.png';
    });
  });
});

Et pour afficher l’image dans le html :

<p><img src="images/off.png" class="echange" /></p>

Conclusion

Voici 2 méthodes pour effectuer des changements d’images au survol, il en existe sûrement d’autres, n’hésitez pas à utiliser les commentaires pour nous en suggérer d’autres

6 commentaires

  • Jessica dit :

    Salut, juste pour info, le tuto est pas trop complet pour un débutant. Il manque la notion script pour qui ne s’y connait pas. Le jquery entre dans la balise et ensuite . Je bug encore par contre. Ce doit être quelque chose de simple, puisque je trouve pas trop lol

  • Jessica dit :

    zut, mauvais affichage. balise : head puis script
    dsl, c’était entre les

  • Camille dit :

    Bonjour,
    Je trouve l’astuce de la solution en jQuery avec 2 images vraiment très astucieuse.

    Est-il possible de rajouter une vitesse de transition plus lente entre les deux images au rollover ? Si oui comment ?

    Merci beaucoup !

    • artcompix dit :

      Bonjour,

      Bien sûr, il faut faire un cross-fade : une image qui disparaît (fadeOut) progressivement tandis que l’autre apparaît (fadeIn) progressivement à la même vitesse.
      Voici les lignes à rajouter en jQuery pour le fadeOut :
      $(this).fadeOut(slow);
      et pour le fadeIn :
      $(this).fadeIn(slow);

      Merci de ta visite

      A bientôt

      • Camille dit :

        Merci pour la réponse !
        Seulement je n’arrive pas à le faire marcher ! Je ne dois pas bien placer
        $(this).fadeOut(slow);
        et
        $(this).fadeIn(slow);

        Est-ce que tu peux m’écrire le code en entier ?

        Merci beaucoup !

        • artcompix dit :

          Bonsoir Camille,

          Alors là j’ai rien pour tester mais je pense qu’il faut changer un peu de tactique pour ce que tu veux. Il faut que les 2 images soient l’une au-dessus de l’autre. Et l’état ON a l’opacité à 0.
          Quand on survole, il faut changer l’opacité de l’image On avec fadeIn() et quand tu es en mouseout il faut ramener l’opacité à 0 de l’image ON avec fadeOut()
          Du coup, pas besoin de cross-fade.
          A tester…

          A bientôt

Laisser un commentaire