Rech Script de présentation images+vignettes
D A R T H
Messages postés
464
Statut
Membre
-
pazz -
pazz -
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
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
A voir également:
- Rech Script de présentation images+vignettes
- Script vidéo youtube - Guide
- Mas script - Accueil - Windows
- Des images - Guide
- Dans cette présentation, trouvez l'étoile. quel nombre contient-elle ? ✓ - Forum Word
- Visualisez cette image avec un logiciel d'édition d'images. combien y a-t-il de pixels noirs sur le camion ? ✓ - Forum Python
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
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
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
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
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
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
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
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
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question