• Diaporama sélections

    Survolez chaque section d'image, pour l'agrandir à partir de sa position affichée.
    Le 1er novembre 2015, souci avec l'hébergement Ekla, qui fournit des adresses d'images hébergées mais ne les affiche plus; le système d'hébergement a changé et n'est pas encore au point !

     

     

     

     

     

    <div style="width: 800px; height: 600px; position: relative; margin: 10px auto;">
    <p id="sel1">&nbsp;</p>
    <p id="sel2">&nbsp;</p>
    <p id="sel3">&nbsp;</p>
    <p id="sel4">&nbsp;</p>
    </div>

    <style type="text/css"><!--
    #sel1{position:absolute; transition:all 1.5s linear; width:196px; height:596px; transform:translate(0px,0px); border:2px solid white; background:url('http://ekladata.com/KNGGJZcYdueGZ3nDIRcIF7_YKxA/DSCN6290.jpg'); background-position:0% 0%;}
    #sel2{position:absolute; transition:all 1.5s linear; width:196px; height:596px; transform:translate(200px,0px); border:2px solid white; background:url('http://ekladata.com/MhPWljpyINWJStfcH1tb3Mi_tEo/DSCN6279.jpg'); background-position:33% 0%;}
    #sel3{position:absolute; transition:all 1.5s linear; width:196px; height:596px; transform:translate(400px,0px); border:2px solid white; background:url('http://ekladata.com/i6T4XlCGjZMALQ4Oo-5TjlIXM2Y/DSCN6282.jpg'); background-position:66% 0%;}
    #sel4{position:absolute; transition:all 1.5s linear; width:196px; height:596px; transform:translate(600px,0px); border:2px solid white; background:url('http://ekladata.com/7DYykOuBVFVu3f-1owbba6wEeD0/DSCN6283.jpg'); background-position:100% 0%;}

    #sel1:hover{transform:translate(1px,1px); width:800px; height:600px;z-index:5;}
    #sel2:hover{transform:translate(1px,1px); width:800px; height:600px;z-index:5;}
    #sel3:hover{transform:translate(1px,1px); width:800px; height:600px;z-index:5;}
    #sel4:hover{transform:translate(1px,1px); width:800px; height:600px;z-index:5;}
    --></style>


    Mes 4 adresses images, en gras, sont surlignées de jaune: vous pouvez placer vos adresses de vos images à la place.
    La particularité de ce montage (déjà proposé, il y a belle lurette), est de sélectionner la partie visible de chaque image pour que l'agrandissement parte de cette position, définie par background-position:33% 0%;  pour la seconde image.
    Les lignes de codes sont très répétitives, à part les identifiants et les adresses images , bien sûr, la position de chacune par rapport aux autres (transform:translate(200px,0px);) et la partie de l'image sélectionnée.
    ...