Mettre en noir et blanc une image couleur

[zonephil]

Salut,

J'ai plusieurs images sur un site (en couleur) que je voudrais, à l'aider d'un script les faire afficher en noir et blanc, et que seulement au passage de la souris qu'elle reprenne leur couleur original. Cela va évite de devoir changer deux séries d'images seulement pour cet effet.

Ce que je trouvé via Google était seulement au niveau de l'opacité de l'image et non pour supprimé les données de couleurs.

Merci

[jcaron]

Je peux me tromper, mais ça m'étonnerait que tu trouves une solution qui marche pour tous les browsers, donc faire deux versions (quite à générer la version N&B à partir de la version couleur de chaque image avec un script sur le serveur ou sur ta machine) me paraît être la bonne solution.

Jacques.

[BonBackLink]

C'est cela, il te faut charger les images en noir et blanc et avoir un script qui charge la photo couleur au survol de la souris. Il peut être coté serveur ou client d'ailleurs. A toi de choisir la technologie : flash, ajax, javascript etc etc ...

[jcaron]

Le script qui fait le changement s'exécute forcément côté client! :-)

Jacques.

[zonephil]

Je vais donc probablement utiliser un rollover. Je voulais simplement trouver une façon d'éviter de charger deux fois la même image *une fois en couleur et une fois en noir et blanc). Il sagit de 36 photos de 92x92px. C'est dans la catégorie du détail, je vais mettre en carreau une photo, et lorsque la personne passe sa souris sur le carreau l'imagine devient en couleur. Je me pose la questions si c'est utile (enfin non, c'est surtout pour les yeux). Je vais peut-être le faire quand même. Ça ajoute du détail après tout.

[jcaron]

Dans les pistes à explorer:

- les "filtres" IE (mais c'est spécifique à IE, et je ne crois pas qu'il y ait de filtre qui fasse ce que tu veux, mais je ne suis pas un spécialiste)

- des propriétés CSS3 qui feraient ça, mais la compatibilité serait probablement très mauvaise

- utiliser Flash pour faire ça (mais ça complique quand même singulièrement il me semble)

- utiliser Java pour faire ça (pareil)

Un "truc" classique avec le rollover consiste à ne pas utiliser deux images, mais une seule qui contient les deux versions collées l'une sous l'autre, le tout coupé comme il faut et avec un JS qui ne fait que décaler l'image (plein de méthodes pour faire ça, suivant que c'est une "vraie" image (IMG quoi), qu'il faudra alors mettre dans un autre DIV avec overflow hidden et tout ça, ou un background sur un DIV).

Jacques.

[captain_torche]

Jcaron : pas besoin de JS pour ça, on peut tout gérer uniquement en CSS.

[jcaron]

Ah ben oui tiens. Pas en forme aujourd'hui moi...

Jacques.

[BonBackLink]

Le script qui fait le changement s'exécute forcément côté client! :-)

Ouups oui c'est vrai j'ai parlé un peu vite car j'imaginai un script coté client qui interagisse avec un script serveur. Par exemple un lecteur flash sur le serveur. Mais c'est vrai que ce n'est pas la logique des choses.

Le plus propre serait d'ailleurs l'ajax.

[slender]

la solution du rollower sans préload avec deux images, une en couleur, l'autre en N&B est simple à mettre en oeuvre avec les CSS est à lire ici chez pompage., effets ici.

[zonephil]

J'avais déjà fait un rollover en CSS (avec preload dans les pages) il y a pluieurs mois avec l'aide d'un forum. Je crois que plus ça va plus je me demande si je vais le faire ce rollover. Ça va peut-être alourdir inutilement, ce n'est que du détail pour les yeux et non fondamental. Je garde mon idée et je vais probablement faire des test le temps de trouver ce qui me convient le mieux, tout en étant correctement compatible.