Rech Script de présentation images+vignettes

Fermé
D A R T H Messages postés 398 Date d'inscription mardi 28 mars 2006 Statut Membre Dernière intervention 27 juin 2024 - 24 avril 2009 à 14:45
 pazz - 25 avril 2009 à 01:42
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

6 réponses

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:

<div id='BigImg'>
<div onmousedown="PermutImg('lien ver ton image');">

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
0
D A R T H Messages postés 398 Date d'inscription mardi 28 mars 2006 Statut Membre Dernière intervention 27 juin 2024 23
25 avril 2009 à 01:24
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
0
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 <script> ensuite tu met le script que j'ai mis plus haut, dans la balise (j'ai mis un div mais tu peut également faire avec une balise <img>) tu met le lien entre les parenthèses comme sa:

<balise onmousedown=PermutImg('images/tonimage.jpg');">

voila

pazz
0
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
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
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
0
oups plus haut c'est toujours onmousedown="PermutImg(this.src);"

pazz
0