Images grises (hover)
gezaakk
Messages postés
443
Statut
Membre
-
DarkAurora Messages postés 443 Statut Membre -
DarkAurora Messages postés 443 Statut Membre -
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!!
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!!
A voir également:
- Images grises (hover)
- Des images - Guide
- Extraire images pdf - Guide
- Recherche images - Guide
- Images enregistrées - Forum Windows
- Comment superposer deux images sur word ✓ - Forum Word
1 réponse
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.
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.
