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 réponses

  1. 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

  2. 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 !

    1. 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

      1. 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 !

        1. 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

Répondre à Jessica Annuler la réponse

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.