• Art.4.12.22A

    L'agrandissement de l'image de fond est le même, sur chaque bouton mais sa position est modifiée, pour présenter la partie choisie.

    Survolez chaque bouton de préférence du haut en bas; l'image de fond doit être assez grande pour s'agrandir avec netteté.

    Cette image est celle de Fort de France. Martinique avec la montagne Pelée dégagée, ce qui est très rare !

     

     

     

     

     

    Les valeurs de l'agrandissement du code sont adaptées à mon image; à vous d'adapter à la votre...


    <div style="margin: 30px auto; width: 800px; height: 450px; border: 1px solid black;">
    <p id="bt1" class="bt">&nbsp;</p>
    <p id="bt2" class="bt">&nbsp;</p>
    <p id="bt3" class="bt">&nbsp;</p>
    <p id="bt4" class="bt">&nbsp;</p>
    <p id="nor1">&nbsp;</p>
    </div>

    <style><!--
    .bt{position:absolute; z-index:5; width:40px; height:25px; border:1px solid black; background:white; border-radius:50%; box-shadow:inset 3px 3px 5px black;}
    #bt1{transform:translate(20px,20px);}
    #bt2{transform:translate(20px,50px);}
    #bt3{transform:translate(20px, 80px);}
    #bt4{transform:translate(20px,110px);}
    #nor1{position:absolute; z-index:1; transition:all 2s linear; transform:translate(0px,0px);
    width:800px; height:450px; filter:contrast(1.2); border:4px ridge white; box-shadow:4px 4px 6px black;background-image:url('http://ekladata.com/e-EHx4sER2AKZjEc8ZqDr76pf6Y.jpg'); background-size:100% 100%;}
    #bt1:hover ~ #nor1{background-size:200% 200%;background-position:0% 50%;}
    #bt2:hover ~ #nor1{background-size:200% 200%;background-position:100% 50%;}
    #bt3:hover ~ #nor1{background-size:200% 200%;background-position:100% 100%;}
    #bt4:hover ~ #nor1{background-size:200% 200%;background-position:0% 100%;}
    --></style>