[RESOLU] Sélectionner sur une image pour remplir un champ

Petit nouveau ! | 4 Messages

16 avr. 2017, 15:03

Bonjour,

Amateur en php je rencontre un obstacle pour moi. Je souhaiterais, dans un formulaire, afficher trois image au dessus d'un champ input (type=text). Initialement les images sont en noir et blanc. J'aimerais qu'au clic, l'image sélectionnée passe en couleur et que le champ input se remplisse d'une valeur (c'est une phrase) que j'aurai défini par image. J'avoue que je suis un peu perdu.
Merci d'avance pour votre aide à tous !

Avatar de l’utilisateur
Administrateur PHPfrance
Administrateur PHPfrance | 7234 Messages

16 avr. 2017, 15:23

Bonjour,

Le + simple, c'est de faire cela en CSS et javascript, plutôt qu'en PHP.

Pour le passage d'une image en couleur en gris, la solution classique est d'utiliser la propriété CSS filter:grayscale() :
https://developer.mozilla.org/fr/docs/W ... yscale()_2

Si tu as besoin d'être compatible aussi avec les navigateurs les + anciens (notamment IE qui ne gère pas la propriétés CSS filter), tu peux utiliser ceci :
https://github.com/karlhorky/gray

Après pour le reste c'est du javascript standard, je te recommande de passer par un framework type jquery pour te simplifier la vie.
Quand tout le reste a échoué, lisez le mode d'emploi...

Petit nouveau ! | 4 Messages

16 avr. 2017, 15:42

Bonjour @rthur et merci beaucoup pour cette réponse. Effectivement je ne connaissais pas du tout filter:grayscale(). Et c'est bien pratique. Mais maintenant comment faire pour que sur ma série d'images, lorsque je clique sur une, celle-ci passe en couleur et que celle précédemment sélectionnée passe en noir et blanc. En fait, il faudrait qu'il n'y en ai toujours qu'une qui soit en couleur.

Avatar de l’utilisateur
Administrateur PHPfrance
Administrateur PHPfrance | 7234 Messages

16 avr. 2017, 16:00

Qu'as-tu essayé ?
Qu'est-ce qui ne marche pas ?
Quand tout le reste a échoué, lisez le mode d'emploi...

Petit nouveau ! | 4 Messages

16 avr. 2017, 19:42

Merci beaucoup, tu avais raison php n'a rien à voir. C'est bon j'ai fait avec jQuery et ça fonctionne. Merci !