• Une idée comme ça...

    Code de l'article publié le 21 janvier 2016.

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     



    Survolez les onglets.

    Pour faire plaisir à Eki Eder,
    qui aime les arrondis
    (si elle voyait mon abdomen, elle serait ravie !),
    mais on peut réaliser ce montage avec des images rectangulaires,
    dans le format souhaité (ici, 800x600px).


    <div id="fd">
    <p id="bt1">&nbsp;</p>
    <p id="bt2">&nbsp;</p>
    <p id="bt3">&nbsp;</p>
    <p id="bt4">&nbsp;</p>
    <p id="bt5">&nbsp;</p>
    <p id="bt6">&nbsp;</p>
    <p id="v1">&nbsp;</p>
    <p id="v2">&nbsp;</p>
    <p id="v3">&nbsp;</p>
    <p id="v4">&nbsp;</p>
    <p id="v5">&nbsp;</p>
    <p id="v6">&nbsp;</p>
    <p id="im1">&nbsp;</p>
    <p id="im2">&nbsp;</p>
    <p id="im3">&nbsp;</p>
    <p id="im4">&nbsp;</p>
    <p id="im5">&nbsp;</p>
    <p id="im6">&nbsp;</p>
    <p id="tt1"><br /><br /><span style="font-size: 14pt; background-color: #ffff00;"><strong>Survolez les onglets.</strong></span><br /><br />Pour faire plaisir &agrave; <span style="font-size: 18pt;"><strong><a href="http://aufildesimages.eklablog.com" target="_blank">Eki Eder</a></strong></span>, <br />qui aime les arrondis<br />(si elle voyait mon abdomen, elle serait ravie !),<br /> mais on peut r&eacute;aliser ce montage avec des images rectangulaires,<br /> dans le format souhait&eacute; (ici, 800x600px).</p>
    </div>
    <style type="text/css"><!--
    #fd{position:relative; width:800px; height:600px; margin:10px auto; border-right:4px double grey; overflow:hidden;}
    #bt1{position:absolute; z-index:10; width:100px; height:75px; border-radius:50%; transform:translate(750px,0px);}
    #bt2{position:absolute; z-index:10; width:100px; height:75px; border-radius:50%; transform:translate(750px,100px);}
    #bt3{position:absolute; z-index:10; width:100px; height:75px; border-radius:50%; transform:translate(750px,200px);}
    #bt4{position:absolute; z-index:10; width:100px; height:75px; border-radius:50%; transform:translate(750px,325px);}
    #bt5{position:absolute; z-index:10; width:100px; height:75px; border-radius:50%; transform:translate(750px,425px);}
    #bt6{position:absolute; z-index:10; width:100px; height:75px; border-radius:50%; transform:translate(750px,523px);}
    #v1{position:absolute; z-index:1; width:100px; height:75px; border-radius:50%; box-shadow:-2px 2px black; transform:translate(750px,0px); background:url(http://ekladata.com/2DWQHDl7aZG_gsJ62-nO1VjY0V4/3643v.jpg);}
    #v2{position:absolute; z-index:1; width:100px; height:75px; border-radius:50%;box-shadow:-2px 2px black; transform:translate(750px,100px); background:url(http://ekladata.com/Y6ellnoQ7p0MYcIsToaesrE4IAs/3645v.jpg);}
    #v3{position:absolute; z-index:1; width:100px; height:75px; border-radius:50%; box-shadow:-2px 2px black; transform:translate(750px,200px); background:url(http://ekladata.com/1yWwd-ArqOIjp11UkHs2LwccZFI/3646v.jpg);}
    #v4{position:absolute; z-index:1; width:100px; height:75px; border-radius:50%;box-shadow:-2px 2px black; transform:translate(750px,325px); background:url(http://ekladata.com/kzGWlo28l8cjM1IhT0zWdIDVje8/3647v.jpg);}
    #v5{position:absolute; z-index:1; width:100px; height:75px; border-radius:50%; box-shadow:-2px 2px black; transform:translate(750px,425px); background:url(http://ekladata.com/r1tNXxn89F84aEdH5hoDkuJ9S-s/3648v.jpg);}
    #v6{position:absolute; z-index:1; width:100px; height:75px; border-radius:50%;box-shadow:-2px 2px black; transform:translate(750px,523px); background:url(http://ekladata.com/ZHrmotBSAWUmy3V115d4ygFAPow/3649v.jpg);}
    #tt1{position:absolute; z-index:1; width:600px; height:400px; border:1px solid black; border-radius:50%; transform:translate(100px,100px); text-align:center; font-size:14pt; box-shadow:inset 8px 8px 16px white, inset -8px -8px 16px black, 4px 4px black; background:url(http://ekladata.com/28ve5_D0_giI1cJHhw80rEMEbAI/creambg.jpg);}
    #im1{position:absolute; z-index:5; transition:all 1s linear; width:800px; height:600px; border-radius:50%; transform:translate(810px,0px); background:url(http://ekladata.com/wA1bW9SaLI0r8aa0-glwwp4MkTc/3643.jpg);box-shadow:inset 8px 8px 16px white, inset -8px -8px 16px black; }
    #im2{position:absolute; z-index:5; transition:all 1s linear; width:800px; height:600px; border-radius:50%; transform:translate(810px,0px); box-shadow:inset 8px 8px 16px white, inset -8px -8px 16px black; background:url(http://ekladata.com/sp1_h5BHgXasbhTxT3VDMrmvGS8/3645.jpg);}
    #im3{position:absolute; z-index:5; transition:all 1s linear; width:800px; height:600px; border-radius:50%; transform:translate(810px,0px); box-shadow:inset 8px 8px 16px white, inset -8px -8px 16px black; background:url(http://ekladata.com/Ox6mq5231SLHHV6iyThoSYpgtoc/3646.jpg);}
    #im4{position:absolute; z-index:5; transition:all 1s linear; width:800px; height:600px; border-radius:50%; transform:translate(810px,0px); box-shadow:inset 8px 8px 16px white, inset -8px -8px 16px black; background:url(http://ekladata.com/2s5hqMGpkYh23QeGze5c5DHvQ4Y/3647.jpg);}
    #im5{position:absolute; z-index:5; transition:all 1s linear; width:800px; height:600px; border-radius:50%; transform:translate(810px,0px); box-shadow:inset 8px 8px 16px white, inset -8px -8px 16px black; background:url(http://ekladata.com/bTyCRQa1gONu7kirzmXGMmxpS1s/3648.jpg);}
    #im6{position:absolute; z-index:5; transition:all 1s linear; width:800px; height:600px; border-radius:50%; transform:translate(810px,0px); background:url(http://ekladata.com/wIX-KRC75roXSY24VahSWIUL78o/3649.jpg);box-shadow:inset 8px 8px 16px white, inset -8px -8px 16px black; }
    #bt1:hover ~ #im1{transform:translate(0px,0px);}
    #bt2:hover ~ #im2{transform:translate(0px,0px);}
    #bt3:hover ~ #im3{transform:translate(0px,0px);}
    #bt4:hover ~ #im4{transform:translate(0px,0px);}
    #bt5:hover ~ #im5{transform:translate(0px,0px);}
    #bt6:hover ~ #im6{transform:translate(0px,0px);}
    --></style>
    Adresse grandes images et adresse vignettes.
    Vous pouvez utiliser les mêmes adresses pour grandes images et vignettes : c'est un peu plus lourd mais très satisfaisant: donc, adresses rouge partout.