• Montage Vadou.

    A l'origine de cette page explicative, le bel article de Vadou:

    http://vadou.eklablog.com/syrphe-chrysotoxe-a-double-ceinture-chrysotoxum-bicinctum-syrphidae-a126622168

    Ambre2 me demande quelques détails sur une telle construction dont je n'ai pas le mérite ... sniff !

    Je vais préparer un exemple mais tout en code html/css, sans avoir besoin d'utiliser un logiciel de traitement d'image mais restons sur cette construction.

    Il faut d'abord savoir créer une image de fond de ce genre (ici, en 800x600px).

    walter

    Il faut ensuite utiliser l'icône "image" pour insérer des images dans l'article afin de les positionner et les dimensionner.

    Montage Vadou.

    Montage Vadou.

    Notre ami Vadou fait avec l'insertion d'image, qu'il positionne ensuite; sa méthode est plus simple que la mienne: je vous laisse le contacter pour détails.
    Il fait directement un lien au clic sur les vignettes; dans ma proposition, survolez chaque vignette et l'image centrale pour les agrandir.

    Montage Vadou.Montage Vadou.Montage Vadou.Montage Vadou.Montage Vadou.

    J'ai l'habitude d'héberger les images dans un album, d'en récupérer les adresses et de construire mon montage avec, ce qui me permet d'en modifier les formes et d'ajouter une animation au survol, par exemple.

    Mon code article: en bleu, l'image de fond, préparée sur the Gimp; en vert, les vignettes en 400x400px, réduites à l'affichage et qui s'agrandissent au survol.


    <div style="width: 800px; height: 800px; border: 4px ridge grey; margin: 5px auto; background: url('http://ekladata.com/Yrpl4d6g_j66WTsJp7UU0w4ndKY.jpg');">
    <p><img id="b1" src="http://ekladata.com/XADxgTzj5N_b5PzZrS_HKdxrzOI.jpg" alt="Montage Vadou." /><img id="b2" src="http://ekladata.com/QJHRUk8oQnmzAk0s8t6e7qKb-l8.jpg" alt="Montage Vadou." /><img id="b3" src="http://ekladata.com/FdDl_zvoxiJ1HCtrn2BM4AgymBs.jpg" alt="Montage Vadou." /><img id="b4" src="http://ekladata.com/788ZM-lNtMp4IlCJPJf0AMhFA5Y.jpg" alt="Montage Vadou." /><img id="b5" src="http://ekladata.com/0jRDPhjCpe49iRYqW5YvS0ELo9Q.jpg" alt="Montage Vadou." /></p>
    </div>

    <style><!--
    #b1{position:absolute; transform:translate(200px,200px); width: 400px; height: 400px; border-radius: 50%; opacity:0.5; transition:all 1s linear;}
    #b1:hover{opacity:1;}
    #b2{position:absolute; transform:translate(80px,325px); width: 100px; height: 100px; border:5px solid white; box-shadow:4px 4px 8px black; border-radius: 50%;transition:all 1s linear;}
    #b2:hover{width: 400px; height: 400px; border-radius: 50%; transform:translate(100px,185px);}
    #b3{position:absolute; transform:translate(620px,325px); width: 100px; height: 100px; border:5px solid white; box-shadow:4px 4px 8px black; border-radius: 50%;transition:all 1s linear;}
    #b3:hover{width: 400px; height: 400px; border-radius: 50%; transform:translate(300px,185px);}
    #b4{position:absolute; transform:translate(350px,75px); width: 100px; height: 100px; border:5px solid white; box-shadow:4px 4px 8px black; border-radius: 50%;transition:all 1s linear;}
    #b4:hover{width: 400px; height: 400px; border-radius: 50%; transform:translate(200px,90px);}
    #b5{position:absolute; transform:translate(350px,620px); width: 100px; height: 100px; border:5px solid white; box-shadow:4px 4px 8px black; border-radius: 50%;transition:all 1s linear;}
    #b5:hover{width: 400px; height: 400px; border-radius: 50%; transform:translate(200px,300px);}
    --></style>