-
Montage direct 2
Nous avons vu comment réaliser un montage de vignettes à cliquer; si nous acceptons d'ouvrir le code source (<>), nous pouvons l'adapter à nos choix.
Icône image et choix de la disposition.
La première vige a été positionnée au centre et les suivantes sur aucun positionnement; elles se sont placées à droite de la première image mais sans espace.
Nous ouvrons le code source pour trouver:
<p style="text-align: center;">
<a href="http://ekladata.com/iXyAObhaYifFWED2IeM_C96NTIw.jpg"><img src="http://ekladata.com/iXyAObhaYifFWED2IeM_C96NTIw@150x84.jpg" alt="Montage direct 2" /></a>
<a href="http://ekladata.com/bV-IpFE7oeF5ZC8Q_Nx5H4agJs8.jpg"><img src="http://ekladata.com/bV-IpFE7oeF5ZC8Q_Nx5H4agJs8@150x84.jpg" alt="Montage direct 2" /></a>
<a href="http://ekladata.com/LpH0m82cyp3esmrlTeASsI3FAT8.jpg"><img src="http://ekladata.com/LpH0m82cyp3esmrlTeASsI3FAT8@150x84.jpg" alt="Montage direct 2" /></a>
<a href="http://ekladata.com/6guOLw_fa8PIEhsXdr-uWnfw9GY.jpg"><img src="http://ekladata.com/6guOLw_fa8PIEhsXdr-uWnfw9GY@150x84.jpg" alt="Montage direct 2" /></a>
<a href="http://ekladata.com/r4_k45EGcmvSNG1l06EOt-latEY.jpg"><img src="http://ekladata.com/r4_k45EGcmvSNG1l06EOt-latEY@150x84.jpg" alt="Montage direct 2" /></a>
<a href="http://ekladata.com/I_UheYCu8sI-0sbBAZpbtv38eC0.jpg"><img src="http://ekladata.com/I_UheYCu8sI-0sbBAZpbtv38eC0@150x84.jpg" alt="Montage direct 2" /></a>
<a href="http://ekladata.com/KsJeXrdcp1W09H5p5Xb5dtsproo.jpg"><img src="http://ekladata.com/KsJeXrdcp1W09H5p5Xb5dtsproo@150x84.jpg" alt="Montage direct 2" /></a>
<a href="http://ekladata.com/1nHgeCm-Qv6aR1lpkzg0ifunu-A.jpg"><img src="http://ekladata.com/1nHgeCm-Qv6aR1lpkzg0ifunu-A@150x84.jpg" alt="Montage direct 2" /></a>
</p>
Pour donner des attributs à la vignette, nous allons ajouter:
style="border:0.3vh solid white; border-radius:1vw; box-shadow:0.3vh 0.3vh 0.6vh black; margin-right:0.2vw;"
Voyons le résultat: clic sur chaque vignette.
Par contre, je n'ai pas trouvé comment modifier l'apparence de l'image agrandie (plein écran, par exemple).
<p style="text-align: center;">
<a href="http://ekladata.com/iXyAObhaYifFWED2IeM_C96NTIw.jpg"><img style="border: 0.3vh solid white; border-radius: 1vw; box-shadow: 0.3vh 0.3vh 0.6vh black; margin-right: 0.2vw;" src="http://ekladata.com/iXyAObhaYifFWED2IeM_C96NTIw@150x84.jpg" alt="Montage direct 2" /></a>
<a href="http://ekladata.com/bV-IpFE7oeF5ZC8Q_Nx5H4agJs8.jpg"><img style="border: 0.3vh solid white; border-radius: 1vw; box-shadow: 0.3vh 0.3vh 0.6vh black; margin-right: 0.2vw;" src="http://ekladata.com/bV-IpFE7oeF5ZC8Q_Nx5H4agJs8@150x84.jpg" alt="Montage direct 2" /></a>
<a href="http://ekladata.com/LpH0m82cyp3esmrlTeASsI3FAT8.jpg"><img style="border: 0.3vh solid white; border-radius: 1vw; box-shadow: 0.3vh 0.3vh 0.6vh black; margin-right: 0.2vw;" src="http://ekladata.com/LpH0m82cyp3esmrlTeASsI3FAT8@150x84.jpg" alt="Montage direct 2" /></a>
<a href="http://ekladata.com/6guOLw_fa8PIEhsXdr-uWnfw9GY.jpg"><img style="border: 0.3vh solid white; border-radius: 1vw; box-shadow: 0.3vh 0.3vh 0.6vh black; margin-right: 0.2vw;" src="http://ekladata.com/6guOLw_fa8PIEhsXdr-uWnfw9GY@150x84.jpg" alt="Montage direct 2" /></a>
<a href="http://ekladata.com/r4_k45EGcmvSNG1l06EOt-latEY.jpg"><img style="border: 0.3vh solid white; border-radius: 1vw; box-shadow: 0.3vh 0.3vh 0.6vh black; margin-right: 0.2vw;" src="http://ekladata.com/r4_k45EGcmvSNG1l06EOt-latEY@150x84.jpg" alt="Montage direct 2" /></a>
<a href="http://ekladata.com/I_UheYCu8sI-0sbBAZpbtv38eC0.jpg"><img style="border: 0.3vh solid white; border-radius: 1vw; box-shadow: 0.3vh 0.3vh 0.6vh black; margin-right: 0.2vw;" src="http://ekladata.com/I_UheYCu8sI-0sbBAZpbtv38eC0@150x84.jpg" alt="Montage direct 2" /></a>
<a href="http://ekladata.com/KsJeXrdcp1W09H5p5Xb5dtsproo.jpg"><img style="border: 0.3vh solid white; border-radius: 1vw; box-shadow: 0.3vh 0.3vh 0.6vh black; margin-right: 0.2vw;" src="http://ekladata.com/KsJeXrdcp1W09H5p5Xb5dtsproo@150x84.jpg" alt="Montage direct 2" /></a>
<a href="http://ekladata.com/1nHgeCm-Qv6aR1lpkzg0ifunu-A.jpg"><img style="border: 0.3vh solid white; border-radius: 1vw; box-shadow: 0.3vh 0.3vh 0.6vh black; margin-right: 0.2vw;" src="http://ekladata.com/1nHgeCm-Qv6aR1lpkzg0ifunu-A@150x84.jpg" alt="Montage direct 2" /></a></p>