[Résolu]Effet sur image "Noir & blanc / Couleur"

Bonjour à tous !
Je suis à la recherche d'un script ou d'une méthode pour modifier une image au passage de la sourie. En fait l'image de base serait en noir et blanc et au passage de la sourie sur celle-ci serait colorée avec un effet de transition.
Ou sinon je pensé faire cela en CSS3, mais le problème vient du fait que la galerie d'images se fait à partir d'une boucle en PHP, donc il m'est impossible de mettre l'image en background-image avec changement en :hover. Puis-je faire cela à partir du html???

Merci d'avance.
Modifié par slop (24 Jul 2010 - 13:58)

Salut !

Je pense que le plus simple serait de faire un rollover classique en utilisant donc 2 images, une couleur et une en noir et blanc.

Tu peux générer les images noir et blanc à partir des images en couleur en utilisant PHP :
http://bubble.ro/How_to_convert_an_image_to_grayscale_using_PHP.html

Si tu veux aller plus loin tu peux créer une grande image qui contiendrait l'image couleur et l'image noir et blanc l'une au dessus de l'autre. Cela te permettrait d'utiliser du CSS assez facilement pour faire ton rollover et de ne pas avoir de temps de chargement supplémentaire : http://www.alsacreations.com/tuto/lire/574-Creer-des-menus-simples-en-CSS.html#portescoulissantes

Bon courage !

Salut,

thebat a écrit :
Si tu veux aller plus loin tu peux créer une grande image qui contiendrait l'image couleur et l'image noir et blanc l'une au dessus de l'autre. Cela te permettrait d'utiliser du CSS assez facilement pour faire ton rollover et de ne pas avoir de temps de chargement supplémentaire : http://www.alsacreations.com/tuto/lire/574-Creer-des-menus-simples-en-CSS.html#portescoulissantes

Mais attention à ce que ces images ne soient pas des images contenant une information, car la technique des portes coulissantes impliquerait d'appeler les images via CSS, et l'information serait donc inaccessible en cas de non application de la CSS ou de non affichage des images.

Si les images comportent une information (des liens de menu par exemple), elles devront être appelées via HTML, et posséder une alternative textuelle renseignée dans l'attribut alt. Le rollover se fera ensuite en javascript.

C'est bien ce que je me disais, mais du coup mon problème se situe à ce niveau. Ma galerie est lié à une base Mysql du coup je la lie dans une boucle en php :

  while($donnees=mysql_fetch_array($reponse))
                    { 
			?>
                        <div id="box">
                        <a href="ls_images/<?php echo $donnees['miniature']; ?>" rel="lytebox[vacation]" target=_blank ><img src="ls_images/<?php echo $donnees['miniature']; ?>" rel="lytebox[vacation]"/></a>
                            <div id="legende">
                               <div> <h4><?php echo $donnees['Rubriques']; ?></h4></div>
				<h5><?php echo $donnees['Sous_titre']; ?></h5>
                            </div>		
                        </div>
                        <?php
                    }
                    mysql_close();

Du coup comment appliquer à ma div"box" l'image en noir et blanc en background d'une maniére dynamique dans l'attribut Background-image du CSS?

slop a écrit :
Du coup comment appliquer à ma div"box" l'image en noir et blanc en background d'une maniére dynamique dans l'attribut Background-image du CSS?

<div class="box" style="background-image: url(<?php echo $machin ?>);">
  ...
</div>

Sur le fond, il y a d'autres techniques possibles pour ce genre d'effet. Tu peux par exemple placer la version en noir et blanc par dessus celle en couleurs, et au survol (ou autre évènement de ton choix) faire varier l'opacité de cette image de 1 à 0, laissant progressivement apparaitre l'image en couleurs. En détail:
- Le positionnement d'une image par dessus une autre se fait en CSS (positionnement absolu par rapport à un parent positionné en relatif).
- Les images de surimpression peuvent être générées dans le DOM en JavaScript, à partir d'informations récupérées des images «normales». Ainsi tu peux avoir une versions sans JavaScript fonctionnelle.
- L'effet de transition de l'opacité peut être fait en CSS (transitions CSS: Webkit, Firefox4), ou bien en JavaScript (la plupart des libs JS ont des fonctions d'animation pour ça).

Sinon, je crois qu'IE a un filtre DirectX (propriété -ms-filter) pour ça depuis longtemps, mais ça ne marchera que dans IE et les filtres DirectX c'est le mal.
Modifié par Florent V. (23 Jul 2010 - 13:09)

Merci de vos réponses. Du coup j'ai placé les div l'une sur l'autre avec Opacity:0 en hover avec une transition en css.