Discussion :

[regis3]

Bonjour,

J'essaie de creer un site de location de livres
Voila ce que je voudrais mettre en place:
Lorsque une recherche produits est effectuee
les resultats s'affichent avec une image miniature des produits (face avant)
au survol de l'image la face arriere s'affiche (en grand).

Je souhaiterais le faire avec CSS (ou tout autre chose si plus facile), mon probleme est que je voudrais que:
dans CSS
background: url(petite1.jpg);
soit sous la forme background: url(#PETITE);
dans HTML
<img src="grande1.jpg"/>
soit sous la forme <img src="#GRANDE" />

Ou quelque chose du meme genre...

En quelque sorte "automatiser" les references d'images pour ne pas a avoir a rentrer 2000 lignes de refs...
Tout ceci fonction de mon ID produit

Si un se sent de me donner un coup de main...

Merci d'avance.

Regis3

[12monkeys]

Bonjour

Je vois ce que tu veux faire, mais en css il n'y a pas de variable, donc ce n'est pas possible tel quel, maintenant avec un langage coté serveur il y aurait peut être matière à faire quelque chose... Php par exemple...

[regis3]

Merci 12monkeys,

Mais je reste un "peu" sur ma faim...

avec un langage coté serveur il y aurait peut être matière à faire quelque chose... Php par exemple...

Un peu plus de details me rendraient bien service...

Entre temps j'utilise un systeme de popup en js, mais je ne trouve pas ca tres beau et puis les explorateurs les bloquent...

Regis3

[12monkeys]

En effet

Je voulais juste te signaler que ce n'était pas possible avec css.

Pour ce qui est d'une réponse plus précise, ce n'est pas facile vu que je ne connais pas ton code et les tenants et aboutissants...

Tu peut par exemple passer par une boucle. Ensuite soit nommer l'image comme l'id produit et le mettre à la place de #PETIT et #GRAND dans ton code (en ajoutant éventuellement une distinction pour la petite et grande image)...

Ou alors si les images ne sont pas au même endroit créer une entrée dans la base de données donnant le chemin vers les images, et récupérer ceci pour l'indiquer à l'endroit voulu...

[regis3]

Ok,

Donc pas de CSS...
Je vais creuser les autres pistes.
Merci.

Regis3

[mino26tz]

Je suis moi aussi débutant, mais je crois que tu peu le faire en CSS.

car si tu mais ton image (la grande) dans un div ou il a la propriété display:none t'as que faire un display:block lors du passage de la souris sur l'image qui sera elle aussi sur un div.
ptit exemple:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
#image_grande
{
   display:none;
............
}
#image_grande a:hover
{
   display:bolck.........
....
}

bon courage

[12monkeys]

Bonjour

Je suis moi aussi débutant, mais je crois que tu peu le faire en CSS.

car si tu mais ton image (la grande) dans un div ou il a la propriété display:none t'as que faire un display:block lors du passage de la souris sur l'image qui sera elle aussi sur un div.

Tout à fait, mais je répondais plutôt à cette partie là :

soit sous la forme background: url(#PETITE);
dans HTML
<img src="grande1.jpg"/>
soit sous la forme <img src="#GRANDE" />

Ou quelque chose du meme genre...

En quelque sorte "automatiser" les references d'images pour ne pas a avoir a rentrer 2000 lignes de refs...
Tout ceci fonction de mon ID produit

il n'existe pas de variables en CSS, donc automatiser cette action n'est pas possible en CSS pure... C'était le sens de mon intervention...