Problème d'images / galeries

09 déc. 2011, 15:59

Bonjour à tous !

Alors voila j'ai une page php qui récupère des galeries d'images dans des dossiers sur le serveur à l'aide d'une boucle.
J'ai un menu à gauche ou apparaisse les différentes couvertures d'albums en noir et blanc

Je souhaiterais que lorsque je passe la souris dessus, ces images deviennent colorées. J'ai déjà géré la chose en javascript
avec les évènements omouseout etc... mais c'est lent et ça ne me plait pas.

Sachant que je dispose des images en couleur et des images en noir et blanc sur mon serveur, je voudrais mettre en place ceci :

Code : Tout sélectionner

#galerie li a{ display: block; background: url(image1_noir_blanc.jpg) }
#galerie li a:hover{ display: block; background: url(image1_couleur.jpg) }

Mais comment faire avec ma boucle pour que le nom de l'image change dans le css ? ex :
Première image avec la couverture image1_noir_blanc.jpg et en hover image1_couleur.jpg
Deuxième image avec la couverture image2_noir_blanc.jpg et en hover image2_couleur.jpg
etc...

Merci d'avance !

20 déc. 2011, 18:08

Bonjour.

Déjà, pour ce que tu veux faire il va falloir identifier distinctement chaque élément de ta galerie (avec un id, donc). Sinon le CSS ne peut pas savoir à quel élément appliquer quelle image... On va dire que tu leur donnes un id="image1".

Et tu as plusieurs solutions :

1. Générer du CSS dans la page HTML.

<head>
 <style type="text/css" media="all">
<?php
for ($i = 1; $i <=$nb; $i++) {
	echo "#image$i {background: url(image${i}_noir_blanc.jpg)}";
}
?>
</style>

Ca alourdit la page, tu perds le côté séparation CSS/HTML mais c'est simple à gérer (si tu n'as pas un "header" global).

2. Création du fichier CSS en php :
Dans ta page, tu appelles galerie.css.php?nb_images=$nb_images.
Exemple de contenu de galerie.css.php (vite fait et à sécuriser) :

<?php
header('Content-type: text/css');
include ('css_constant.css');
$nb = (int) $_GET['nb'];
for ($i = 1; $i <=$nb; $i++) {
	echo "#image$i {background: url(image${i}_noir_blanc.jpg)}";
}

Le problème, c'est que par définition le CSS varie, et il faut à chaque fois le recharger (et gérer la mise en cache). Et il faut toujours gérer la problématique éventuelle du "header" global (ou mettre l'appel au CSS dans le corps du HTML, ce qui n'est pas W3C-compliant)
Mais tu gardes une structure propre...

3. Utiliser du JS.
Pas pour faire de la gestion d'évènements, c'est vite lourd. Juste pour modifier le CSS.
Là comme ça, je n'ai pas d'exemple à donner, mais une recherche sur javascript modifier CSS devrait faire l'affaire

L'avantage, c'est que tu n'as plus à te soucier du CSS, l'inconvénient c'est que les utilisateurs sans JS n'ont plus rien

Problème d'images / galeries

Qui est en ligne