diapo anim vignettes

   Au survol de chaque vignette, celle-ci va se déplacer, changer d'opacité et de bordure; au clic, l'image s'affichera dans le grand cadre; défilement des vignettes par le curseur inférieur.
   Au risque d'en "barber" beaucoup et d'en intéresser quelques-un(e)s, voici le principe du code de ce montage, qui reprend les bases des diapos de Michal avec les nouvelles possibilités de transition des navigateurs.
<div style="border: 10px ridge brown; width: 600px; margin: 5px 0px 0px 20px;">
    <img src="http://1.jpg" id="machin" style="width: 600px;" name="machin" />
  </div>
<div style="margin: 10px 0px 0px 0px; padding: 5px; height: 120px; overflow: auto; white-space: nowrap;">
    <img class="truc" src="http:1.jpg" onclick="machin.src='http://1.jpg'" style="width: 100px; margin: 0px 2px 0px 2px;" /><img class="truc" src="http:/2.jpg" onclick="machin.src='http://2.jpg'" style="width: 100px; margin: 0px 2px 0px 2px;" />...</div>
<style type="text/css"><!--
.truc {
   border: 4px ridge green;
   opacity:0.7;
   -webkit-transition: all 0.5s ease;
   -moz-transition: all 0.5s ease;
}
.truc:hover {
   border:4px ridge red;
   box-shadow:1px 1px 8px;
   opacity:1;
   -webkit-transform: translate(0px, 10px) ;
   -moz-transform: translate(0px, 10px);
--></style>
    Juste un mot d'explication: le cadre en bleu est celui de la grande image; le cadre en brun contient les vignettes dont la hauteur est fixée à 100px et le positionnement précisé; leur nombre est à votre gré; la partie en vert concerne la transition au survol (bordure, opacité, déplacement) pour Firefox et Chrome/Safari.
Créer un blog gratuit sur over-blog.com - Contact - C.G.U. - Rémunération en droits d'auteur - Signaler un abus - Articles les plus commentés