• Construction 7

    Pour sans doute terminer la série sur un montage plus simple et sans doute déjà proposé, voilà un changement d'image au survol de boutons, par changement d'opacité.
    Le ciel, vu de ma fenêtre, m'a servi de sujet.

     

     

    Survolez chaque bouton.

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    <div style="width:60vw; height:69vh; border:0.3vh ridge white; margin:2vh auto;">
    <p id="ng0">&nbsp;</p>
    <p id="ng00">Survolez chaque bouton.</p>
    <p id="cl1" class="cl">&nbsp;</p>
    <p id="cl2" class="cl">&nbsp;</p>
    <p id="cl3" class="cl">&nbsp;</p>
    <p id="cl4" class="cl">&nbsp;</p>
    <p id="cl5" class="cl">&nbsp;</p>
    <p id="cl6" class="cl">&nbsp;</p>
    <p id="cl7" class="cl">&nbsp;</p>
    <p id="ng1" class="ng">&nbsp;</p>
    <p id="ng2" class="ng">&nbsp;</p>
    <p id="ng3" class="ng">&nbsp;</p>
    <p id="ng4" class="ng">&nbsp;</p>
    <p id="ng5" class="ng">&nbsp;</p>
    <p id="ng6" class="ng">&nbsp;</p>
    <p id="ng7" class="ng">&nbsp;</p>
    </div>
    <style><!--
    #ng0{position:absolute; z-index:1; width:60vw; height:69vh; background:url('http://ekladata.com/xuNr3g5Yb_kLBXcDrRtp6aHHStY.jpg'); background-size:60vw 69vh;}
    #ng00{position:absolute; z-index:1; width:40vw; text-align:center; font-size:3vw; color:white; text-shadow:0.2vh 0.2vh black; transform:translate(10vw,50vh);}
    .cl{position:absolute; z-index:10; width:1.5vw; height:1.5vw; border:0.5vh solid white;}
    #cl1{transform:translate(57vw,5vh);}
    #cl2{transform:translate(57vw,10vh);}
    #cl3{transform:translate(57vw,15vh);}
    #cl4{transform:translate(57vw,20vh);}
    #cl5{transform:translate(57vw,25vh);}
    #cl6{transform:translate(57vw,30vh);}
    #cl7{transform:translate(57vw,35vh);}
    .ng{position:absolute; z-index:2; width:60vw; height:69vh; transition:all 1s linear;}
    #ng1{background:url('http://ekladata.com/u-hadOGyqnZ-CtJGFiwfC-vnlJg.jpg'); background-size:60vw 69vh; opacity:0;}
    #ng2{background:url('http://ekladata.com/8UvjsQpsEsERxTNQN1b3VjFCX4Y.jpg'); background-size:60vw 69vh; opacity:0;}
    #ng3{background:url('http://ekladata.com/kvM8_sVEgUSt_8Y3ftkYZ7XW5-s.jpg'); background-size:60vw 69vh; opacity:0;}
    #ng4{background:url('http://ekladata.com/JO9gEhEqpz-KFGm4kqMgIPv9rEM.jpg'); background-size:60vw 69vh; opacity:0;}
    #ng5{background:url('http://ekladata.com/qt21laQiL_7pMiULdjhZzxVk9bI.jpg'); background-size:60vw 69vh; opacity:0;}
    #ng6{background:url('http://ekladata.com/iVOabDsxg7fVz5MJO4q1cUNKBtU.jpg'); background-size:60vw 69vh; opacity:0;}
    #ng7{background:url('http://ekladata.com/851T1293vYj_Ths88fr3pDuQhdE.jpg'); background-size:60vw 69vh; opacity:0;}
    #cl1:hover ~ #ng1,#cl2:hover ~ #ng2,#cl3:hover ~ #ng3,#cl4:hover ~ #ng4,#cl5:hover ~ #ng5,#cl6:hover ~ #ng6,#cl7:hover ~ #ng7{opacity:1;}
    --></style>

    Si les dimensions du montage vous conviennent, remplacez mes adresses/image en rouge, par les vôtres ... et pi c'est tout !

    Vous remarquerez que le bouton cl1 commande l'opacité de l'image ng1, idem pour cl2/ng2, etc...

    Le format de vos images est indifférent: le code les adapte au montage; leur nombre est également à votre convenance, en + ou en -.