Utiliser des miniatures
barbara
-
Utilisateur anonyme -
Utilisateur anonyme -
Salut !
Je suis en train de créer mon site web en html et j'aurais besoins d'un peu d'aide.
Je voudrais présenter plusieurs images, j'ai donc mes miniatures faites avec RightThumb d'un coté et je voudrais qu'en cliquant dessus on puisse voir l'image entière s'afficher un peu plus bas.
En fait, je ne sais pas du tout comment créer un lien vers un espace situé sur la même page.
J'ai pensé faire une autre page, exactement la même, à l'exception de l'image agrandie sur la 2ème page, mais je ne sais pas si c'est correct.
Merci de m'éclairer sur le sujet
Je débute là dedans, mais je trouve ça passionnant!
Je suis en train de créer mon site web en html et j'aurais besoins d'un peu d'aide.
Je voudrais présenter plusieurs images, j'ai donc mes miniatures faites avec RightThumb d'un coté et je voudrais qu'en cliquant dessus on puisse voir l'image entière s'afficher un peu plus bas.
En fait, je ne sais pas du tout comment créer un lien vers un espace situé sur la même page.
J'ai pensé faire une autre page, exactement la même, à l'exception de l'image agrandie sur la 2ème page, mais je ne sais pas si c'est correct.
Merci de m'éclairer sur le sujet
Je débute là dedans, mais je trouve ça passionnant!
A voir également:
- Utiliser des miniatures
- Utiliser chromecast - Guide
- Utiliser iphone comme webcam - Guide
- Utiliser tablette comme deuxieme ecran - Guide
- Comment utiliser utorrent - Télécharger - Téléchargement & Transfert
- Comment utiliser wetransfer - Guide
1 réponse
Il suffit de le faire en JS:
Tout d'abord pour faire simple on peux mettre un lien vers l'image en grand autour de la miniature avec un attribut onClick, qui lancera une fonction JS.
Comme ceci:
La fonction picChange à comme paramètre le lien, qui est récupéré avec this (élément appelant la fonction donc <a>) et son lien avec .href
event.preventDefault(); return false; permettent d'enlever la fonction normal, qui est d'ouvrir le lien (donc l'image)
Ensuite on créé une div qui contiendras l'image
Enfin le script qui exécute ça
Ici on récupère la div par son id et l'img par son tag, dont on change la source (src) par le lien de l'image cliqué.
Voilà un exemple complet:
C'est peut-être pas le meilleur moyen ou autre, mais ça fonctionne et c'est pas complexe
Tout d'abord pour faire simple on peux mettre un lien vers l'image en grand autour de la miniature avec un attribut onClick, qui lancera une fonction JS.
Comme ceci:
<a href="http://dummyimage.com/600x600/00f/fff" onclick="picChange(this.href); event.preventDefault(); return false;"><img src="http://dummyimage.com/200x200/00f/fff" alt="Nom de l'image"></a>
La fonction picChange à comme paramètre le lien, qui est récupéré avec this (élément appelant la fonction donc <a>) et son lien avec .href
event.preventDefault(); return false; permettent d'enlever la fonction normal, qui est d'ouvrir le lien (donc l'image)
Ensuite on créé une div qui contiendras l'image
<div id="content"> <img src="" alt=""> </div>
Enfin le script qui exécute ça
<script>
function picChange (link) {
document.getElementById('content').getElementsByTagName('img')[0].src = link;
}
</script>
Ici on récupère la div par son id et l'img par son tag, dont on change la source (src) par le lien de l'image cliqué.
Voilà un exemple complet:
<a href="http://dummyimage.com/600x600/f00/fff" onclick="picChange(this.href); event.preventDefault(); return false;"><img src="http://dummyimage.com/200x200/f00/fff" alt="Nom de l'image"></a>
<a href="http://dummyimage.com/600x600/0f0/fff" onclick="picChange(this.href); event.preventDefault(); return false;"><img src="http://dummyimage.com/200x200/0f0/fff" alt="Nom de l'image"></a>
<a href="http://dummyimage.com/600x600/00f/fff" onclick="picChange(this.href); event.preventDefault(); return false;"><img src="http://dummyimage.com/200x200/00f/fff" alt="Nom de l'image"></a>
<div id="content">
<img src="" alt="">
</div>
<script>
function picChange (link) {
document.getElementById('content').getElementsByTagName('img')[0].src = link;
}
</script>
C'est peut-être pas le meilleur moyen ou autre, mais ça fonctionne et c'est pas complexe