Images grises (hover)

Fermé
gezaakk Messages postés 380 Date d'inscription jeudi 27 mai 2010 Statut Membre Dernière intervention 26 mai 2015 - 4 avril 2012 à 16:58
DarkAurora Messages postés 417 Date d'inscription lundi 26 novembre 2007 Statut Membre Dernière intervention 21 janvier 2013 - 30 oct. 2012 à 18:10
Salut à tous;

J'aimerais que certaines images de mon site qui sont en couleurs soient en noir et blanc.
Lorsque le visiteur passe sa souris sur l'image en question, elle redeviennent colorées!

Je ne sais pas si c'est possible avec Javascript (jQuery?)

Merci à ceux qui me répondront!!


1 réponse

DarkAurora Messages postés 417 Date d'inscription lundi 26 novembre 2007 Statut Membre Dernière intervention 21 janvier 2013 27
30 oct. 2012 à 18:10
En jquery tu peux effectivement appliquer ce genre d'effet il s'agit d'un overlay (terme bien utile pour les recherches web)

Il te suffit d'initialiser les images que tu souhaites grisées avec une 'class', après il te faut uniquement créer un css spécifique pour simuler l'overlay (si je retrouve un de mes codes je le copierais ici).

Une fois que l'élément est grisé par défaut il suffit d'ajouter un évènement (hover)
sur l'ensemble de tes images identifié par 'class' et de supprimer cette 'class' lorsque ton pointer de souris est dessus

pour le hover c'est par ici https://api.jquery.com/hover/

pour lorsque ta souris est au dessus de l'image tu n'as qu'a faire $(this).removeClass('class');

et lorsque tu quitte ton élément il suffit de remettre la classe -> $(this).addClass('class');

Si je n'ai pas été claire n'hésite pas a revenir poser tes questions.
0