A voir également:
- Utiliser des miniatures
- Utiliser chromecast - Guide
- Comment utiliser l'ia - Guide
- Comment utiliser utorrent - Télécharger - Téléchargement & Transfert
- Comment utiliser google drive - Guide
- Comment utiliser wetransfer gratuit ? - Guide
1 réponse
Utilisateur anonyme
5 janv. 2015 à 00:49
5 janv. 2015 à 00:49
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
