• Diapo H

    Survolez chaque bouton.

    A

    B

    C

    D

    E

    F

     

     

     

     

     

     

    Code:

    <div id="fd">
    <p id="bt1">A</p>
    <p id="bt2">B</p>
    <p id="bt3">C</p>
    <p id="bt4">D</p>
    <p id="bt5">E</p>
    <p id="bt6">F</p>
    <p id="p1">&nbsp;</p>
    <p id="p2">&nbsp;</p>
    <p id="p3">&nbsp;</p>
    <p id="p4">&nbsp;</p>
    <p id="p5">&nbsp;</p>
    <p id="p6">&nbsp;</p>
    </div>

    <style><!--
    #fd{position:relative; width:1000px; height:563px; border:4px ridge white; box-shadow:4px 4px 6px black; overflow:hidden; margin:10px auto; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/octobre/08/DSCN5934.JPG');}
    #bt1{ position:absolute; z-index:10; transform:translate(950px,10px); width:30px; height:30px; border:1px solid black; box-shadow:1px 1px black; background-color:yellow; border-radius:50%; text-align:center; font-size:15pt;}
    #bt2{ position:absolute; z-index:10; transform:translate(950px,60px); width:30px; height:30px; border:1px solid black; box-shadow:1px 1px black; background-color:yellow; border-radius:50%; text-align:center; font-size:15pt;}
    #bt3{ position:absolute; z-index:10; transform:translate(950px,110px); width:30px; height:30px; border:1px solid black; box-shadow:1px 1px black; background-color:yellow; border-radius:50%; text-align:center; font-size:15pt;}
    #bt4{ position:absolute; z-index:10; transform:translate(950px,160px); width:30px; height:30px; border:1px solid black; box-shadow:1px 1px black; background-color:yellow; border-radius:50%; text-align:center; font-size:15pt;}
    #bt5{ position:absolute; z-index:10; transform:translate(950px,210px); width:30px; height:30px; border:1px solid black; box-shadow:1px 1px black; background-color:yellow; border-radius:50%; text-align:center; font-size:15pt;}
    #bt6{ position:absolute; z-index:10; transform:translate(950px,260px); width:30px; height:30px; border:1px solid black; box-shadow:1px 1px black; background-color:yellow; border-radius:50%; text-align:center; font-size:15pt;}
    #p1{ position:absolute; transition:all 1s linear; width:1000px; height:563px; transform:translate(0px,0px) rotate(90deg); transform-origin:0px 0px; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/octobre/08/DSCN5935.JPG');}
    #p2{ position:absolute; transition:all 1s linear; width:1000px; height:563px; transform:translate(0px,0px) rotate(90deg); transform-origin:0px 0px; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/octobre/08/DSCN5936.JPG');}
    #p3{ position:absolute; transition:all 1s linear; width:1000px; height:563px; transform:translate(0px,0px) rotate(90deg); transform-origin:0px 0px; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/octobre/08/DSCN5937.JPG');}
    #p4{ position:absolute; transition:all 1s linear; width:1000px; height:563px; transform:translate(0px,0px) rotate(90deg); transform-origin:0px 0px; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/octobre/08/DSCN5938.JPG');}
    #p5{ position:absolute; transition:all 1s linear; width:1000px; height:563px; transform:translate(0px,0px) rotate(90deg); transform-origin:0px 0px; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/octobre/08/DSCN5942.JPG');}
    #p6{ position:absolute; transition:all 1s linear; width:1000px; height:563px; transform:translate(0px,0px) rotate(90deg); transform-origin:0px 0px; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/octobre/08/DSCN5943.JPG');}
    #bt1:hover ~ #p1{transform:translate(0px,0px) rotate(0deg);}
    #bt2:hover ~ #p2{transform:translate(0px,0px) rotate(0deg);}
    #bt3:hover ~ #p3{transform:translate(0px,0px) rotate(0deg);}
    #bt4:hover ~ #p4{transform:translate(0px,0px) rotate(0deg);}
    #bt5:hover ~ #p5{transform:translate(0px,0px) rotate(0deg);}
    #bt6:hover ~ #p6{transform:translate(0px,0px) rotate(0deg);}
    --></style>
    ...
    Si vous regardez bien chaque ligne des boutons, la seule différence de l'une sur l'autre,hormis l'identifiant, est la position verticale, surlignée en jaune.
    De même, pour les images, seule l'adresse de l'image de fond est différente, l'animation est la même et peut être facilement modifiée.
    Ajoutez ou retirez un ou des ensembles bouton/image et la ou les lignes d'animation correspondantes