Bonjour,
je n'ai pas de tuto sous la main mais je peux t'expliquer le fonctionnement.
Au préalable il faut disposer de chaque image dans ses deux versions, grande & petite (ce n'est pas obligatoire toutefois, on peut si on veut simplifier se contenter de la grande mais le rendu des miniatures sera alors un peu moins beau). Ca peut être une bonne idée d'avoir une logique de nommage entre les deux versions d'une même image (genre IMG4502864.jpg pour la grande et IMG4502864
_small.jpg pour la miniature correspondante). Toute la magie se fait ensuite en javascript.
On prépare une page html pouvant afficher tout ceci, et on affecte un attribut
id à la grande image pour pouvoir la manipuler facilement en javascript. Ensuite dans chaque miniature on utilise l'attribut (évènement)
onclick pour y insérer du code javascript qui va :
- retrouver l'URL source de la miniature sur laquelle l'internaute vient de cliquer (c.a.d. son attribut
src )
- transformer cette URL source (si on a suivi une logique de nommage comme celle que je te proposais plus haut, c'est très simple) pour arriver à l'URL de la grande image correspondante.
- affecter l'URL obtenue à l'attribut
src de notre grande image que l'on retrouve via document.getElementById().
Petit code source pour illustrer :
<!-- la grande image -->
<img id="la_grande_image" src="images/photo1.jpg" width="640" height="480" />
<!-- nos miniatures cliquables -->
<img src="images/photo1_small.jpg" width="64" height="48" onclick="document.getElementById('la_grande_image').src=this.src.replace('_small','');" />
<img src="images/photo2_small.jpg" width="64" height="48" onclick="document.getElementById('la_grande_image').src=this.src.replace('_small','');" />
Et voilà, l'effet est là, les miniatures sont cliquables et permettent de faire changer la grande image.
Bonjour,
je n'ai pas de tuto sous la main mais je peux t'expliquer le fonctionnement.
Au préalable il faut disposer de chaque image dans ses deux versions, grande & petite (ce n'est pas obligatoire toutefois, on peut si on veut simplifier se contenter de la grande mais le rendu des miniatures sera alors un peu moins beau). Ca peut être une bonne idée d'avoir une logique de nommage entre les deux versions d'une même image (genre IMG4502864.jpg pour la grande et IMG4502864[color=#FF0000]_small[/color].jpg pour la miniature correspondante). Toute la magie se fait ensuite en javascript.
On prépare une page html pouvant afficher tout ceci, et on affecte un attribut [b]id[/b] à la grande image pour pouvoir la manipuler facilement en javascript. Ensuite dans chaque miniature on utilise l'attribut (évènement) [b]onclick[/b] pour y insérer du code javascript qui va :
- retrouver l'URL source de la miniature sur laquelle l'internaute vient de cliquer (c.a.d. son attribut [b]src[/b] )
- transformer cette URL source (si on a suivi une logique de nommage comme celle que je te proposais plus haut, c'est très simple) pour arriver à l'URL de la grande image correspondante.
- affecter l'URL obtenue à l'attribut [b]src[/b] de notre grande image que l'on retrouve via document.getElementById().
Petit code source pour illustrer :
[html]
<!-- la grande image -->
<img id="la_grande_image" src="images/photo1.jpg" width="640" height="480" />
<!-- nos miniatures cliquables -->
<img src="images/photo1_small.jpg" width="64" height="48" onclick="document.getElementById('la_grande_image').src=this.src.replace('_small','');" />
<img src="images/photo2_small.jpg" width="64" height="48" onclick="document.getElementById('la_grande_image').src=this.src.replace('_small','');" />
[/html]
Et voilà, l'effet est là, les miniatures sont cliquables et permettent de faire changer la grande image.
