• 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.

    Montage direct 2Montage direct 2Montage direct 2Montage direct 2Montage direct 2Montage direct 2Montage direct 2Montage direct 2

    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).

    Montage direct 2Montage direct 2Montage direct 2Montage direct 2Montage direct 2Montage direct 2Montage direct 2Montage direct 2

    <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>