Créer en jQuery une image réactive (en rollover) au moment du passage de la souris
La bibliothèque JQuery facilite la gestion des évènements JavaScript, notamment avec des méthodes pour gérer le passage de la souris.
Il est possible grâce au langage JavaScript d'interagir avec l'utilisateur en fonction des actions qu'il effectue sur une page.
Par ce biais, on peut notamment changer une image au passage de la souris. La bibliothèque JavaScript JQuery facilite la gestion des évènements JavaScript. Les méthodes utilisées pour gérer le passage de la souris sont mouseover, qui permet d'assigner une fonction qui se déclenchera au passage de la souris sur l'élément, et mouseout lorsque la souris ne passe plus sur l'élément (à lire la fiche pratique sur la problématique connexe : Comment changer la source src d'une image en jQuery lors d'un clic de souris ?).
Les deux images utilisées sont image.gif lorsque la souris n'est pas sur l'image, et imageover.gif lorsque la souris est sur l'image. Pour changer l'image quand la souris passe sur l'élément, la méthode match va être utilisée afin de récupérer le nom d'origine de l'image sans son extension, puis on ajoutera le suffixe over.gif.
Pour l'évènement mouseout, la fonction replace() sera utilisée pour enlever la chaîne de caractères over dans le nom de l'image. La méthode attr() servira à modifier la source de la balise image, permettant ainsi un changement d'image à l'écran :
$(function() {
$(img)
.mouseover(function() {
var nouvelleImage = $(this).attr(src).match(/[^.]+/) + over.gif;
$(this).attr(src, nouvelleImage);
})
.mouseout(function() {
var nouvelleImage = $(this).attr(src).replace(over.gif, .gif);
$(this).attr(src, nouvelleImage);
});
});