• Diaporama 3 rando

    La page du 11 décembre 2015 propose un montage avec une photo de fond sur laquelle sont placés des images de cadeaux; en cliquant sur ces cadeaux, on fait apparaître une image qui remplit le cadre.

    On peut remplacer les images de cadeaux par des noms, des vignettes ou des symboles.

    On peut également animer ces cadeaux, en les faisant défiler, par exemple.

    Essayons un exemple, au clic sur les noms qui défilent de gauche à droite et retour par le bouton rouge, en haut à droite.


    <div id="mont">
    <div id="ancres"><a id="lien1" class="ancre"></a> <a id="lien2" class="ancre"></a> <a id="lien3" class="ancre"></a> <a id="lien4" class="ancre"></a> <a id="lien5" class="ancre"></a> <a id="lien6" class="ancre"></a> <a id="lien7" class="ancre"></a> <a id="lien8" class="ancre"></a>
    <p id="tr0"><a href="#lien"><img src="http://ekladata.com/5vYRXqnn3UosWx7Y0xF1eIgstfw/btrec1.png" alt="" /></a></p>
    <p id="bd"><marquee scrollamount="10" onmouseover="this.stop()" onmouseout="this.start()" direction="right"> <span class="tt"><a style="color: #ffffff; text-shadow: 1px 1px black; font-weight: bold;" href="#lien1">Photo 8</a></span> <span class="tt"><a style="color: #ffffff; text-shadow: 1px 1px black; font-weight: bold;" href="#lien2">Photo 7</a></span> <span class="tt"><a style="color: #ffffff; text-shadow: 1px 1px black; font-weight: bold;" href="#lien3">Photo 6</a></span> <span class="tt"><a style="color: #ffffff; text-shadow: 1px 1px black; font-weight: bold;" href="#lien4">Photo 5</a></span> <span class="tt"><a style="color: #ffffff; text-shadow: 1px 1px black; font-weight: bold;" href="#lien5">Photo 4</a></span> <span class="tt"><a style="color: #ffffff; text-shadow: 1px 1px black; font-weight: bold;" href="#lien6">Photo 3</a></span> <span class="tt"><a style="color: #ffffff; text-shadow: 1px 1px black; font-weight: bold;" href="#lien7">Photo 2</a></span> <span class="tt"><span style="color: #ffffff;"><a style="color: #ffffff; text-shadow: 1px 1px black; font-weight: bold;" href="#lien8">Photo 1</a></span></span> </marquee></p>
    <img id="p1" src="http://ekladata.com/1YOTOSpMCWKciCzSo0Z9WkC4R88/6327.jpg" alt="" /> <img id="p2" src="http://ekladata.com/W2_t8dWq_j3I-qz7xRKqaB0g9Ew/6326.jpg" alt="" /> <img id="p3" src="http://ekladata.com/tOYHvR7n_HNesYE6_bNttE8rVwo/6325.jpg" alt="" /> <img id="p4" src="http://ekladata.com/iMftXXd6xf_2EJbPHExMw1TTV84/6324.jpg" alt="" /> <img id="p5" src="http://ekladata.com/JwpJmHj3zm6ltjqO7G3hQKNkrTE/6323.jpg" alt="" /> <img id="p6" src="http://ekladata.com/IhzQrfEdzIOJrSDQIifh8M3akg8/6322.jpg" alt="" /> <img id="p7" src="http://ekladata.com/AIJ4pI90xHjL_vZ2tN_-WavxLsU/6321.jpg" alt="" /> <img id="p8" src="http://ekladata.com/aifI3CXuGA2yCePCgbEFP-7F2T8/6320.jpg" alt="" /></div>
    </div>

    <style type="text/css"><!--
    #mont{position: relative; width: 800px; height: 600px; border: 4px ridge white; margin: 5px auto; background: url('http://ekladata.com/gglESUDwxEI524KNEhuLRwYQLtY/6318.jpg'); overflow:hidden;}
    #ancres a.ancre{display: none;}
    #tr0{transform:translate(750px,20px);position:absolute;z-index:15; }
    #bd{position:absolute; z-index:5; width:800px; height:50px; transform:translate(0px,500px);}
    .tt{ font-size:25pt; margin:0px 10px;}
    #p1{ position:absolute; z-index:6; transition:all 2s linear; transform:translate(400px,300px); width:0px; height:0px;}
    #p2{ position:absolute; z-index:6; transition:all 2s linear; transform:translate(400px,300px); width:0px; height:0px;}
    #p3{ position:absolute; z-index:6; transition:all 2s linear; transform:translate(400px,300px); width:0px; height:0px;}
    #p4{ position:absolute; z-index:6; transition:all 2s linear; transform:translate(400px,300px); width:0px; height:0px;}
    #p5{ position:absolute; z-index:6; transition:all 2s linear; transform:translate(400px,300px); width:0px; height:0px;}
    #p6{ position:absolute; z-index:6; transition:all 2s linear; transform:translate(400px,300px); width:0px; height:0px;}
    #p7{ position:absolute; z-index:6; transition:all 2s linear; transform:translate(400px,300px); width:0px; height:0px;}
    #p8{ position:absolute; z-index:6; transition:all 2s linear; transform:translate(400px,300px); width:0px; height:0px;}
    #ancres a#lien1:target ~ #p1{position:absolute;transform:translate(0px,0px); width:800px; height:600px;}
    #ancres a#lien2:target ~ #p2{position:absolute;transform:translate(0px,0px); width:800px; height:600px;}
    #ancres a#lien3:target ~ #p3{position:absolute;transform:translate(0px,0px); width:800px; height:600px;}
    #ancres a#lien4:target ~ #p4{position:absolute;transform:translate(0px,0px); width:800px; height:600px;}
    #ancres a#lien5:target ~ #p5{position:absolute;transform:translate(0px,0px); width:800px; height:600px;}
    #ancres a#lien6:target ~ #p6{position:absolute;transform:translate(0px,0px); width:800px; height:600px;}
    #ancres a#lien7:target ~ #p7{position:absolute;transform:translate(0px,0px); width:800px; height:600px;}
    #ancres a#lien8:target ~ #p8{position:absolute;transform:translate(0px,0px); width:800px; height:600px;}
    --></style>

    L'animation est donné par le code marquee... et si vous n'en voulez pas, vous supprimez les codes surlignées en bleu... en adaptant la taille de la police pour que tout rentre dans la largeur du montage; la vitesse de défilement est donnée par :scrollamount="10" avec valeur 1=lent et 100=rapide.
    Les images font 800x600px et leurs adresses sont en rouge.
    A la place des noms, vous pouvez placer des vignettes ou tout autre élément, qui servira de bouton.