Rech Script de présentation images+vignettes Fermé

Question

Bonjour,

bonjour, je n'y connais pas grand chose en programmation à part un peu de html

je cherche un script javascript pour  présenter une grande image et plusieurs vignettes dessous,
si je clique sur une vignette le contenu de la vignette apparait a la place de la grande image

- la taille de la grande image est fixe, les images qui vont la remplacer feront la même taille
- le nombre de vignettes peut varier

Quelqu'un sait où je peu trouver ça, avec des instructions claires pour faire quelques modifs , car je ne connais pas le javascript

merci d'avance

pazz · Answer

salut, je ne suis pas sur d'avoir compris, tes vignette se sont des image et tu veux que la grande image sois remplacé par la petite? Si c'est le cas tu peux simplement créer un div avec la grande image en background, puis dessous tu place tes autre image avec cet événement. html:

javascript: PermutImg(img){ document.getElementById('BigImg').style.backgroundImage=img; } dans le html tu déclare un div (BigImg) avec l'image de départ que tu ajoute dans le css puis, dans tes vignette tu ajoute la fonction PermutImg l'ors du click (onmousedown ou onclick) et dans le script tu change simplement le background du div BigImg mais attention il faut que les image sois de la même tail ! pazz

D A R T H · Answer

non en fait c'est pour avoir plusieurs vues d'un objet...

exemple (les tailles sont au pif) 
on démarre sur la vue principale, la grande image en 300x200 (1) et si on clique sur les petites vignettes dessous en 30x20 (2)(3)(4) sont a par exemple une autre vue de l'objet...

j'ai trouvé ça comme exemple : http://dasme.org/imagegal/demo/  mais ce n'est pas assez clair

pazz · Answer

et bien oui tu peux utiliser mon script pour faire sa il est simple, pas très évolutif mais il fonctionne enfin j'ai pas tester mais sa devrai le faire. pour faire simple tu peut l'insérer directement dans la page a l'aide de la balise

pazz · Answer

mais il te faut faire des images a la bonne tail,  il te suffit de les dimensionner sur photoshop par exemple
sinon encore plus simple tu fait tes balises img comme ceci

<img class='vignette' onmousedown(this.src) />

et dans ton css tu dimensionne ta class vignette en 30x30 et le tour est jouer.

pazz

pazz · Answer

par contre si les tail son pas fix alors tu change la première balise ('BigImg') par une balise img et dans le script tu change style.backgroundImage par src sa fonctionne aussi. et la tu n'a plus de souci de tail.

pazz

pazz · Answer

oups plus haut c'est toujours onmousedown="PermutImg(this.src);"

pazz

Rech Script de présentation images+vignettes

6 réponses

Discussions similaires