• Diapo Clic 2

    Un fidèle visiteur, qui se reconnaitra, a voulu reprendre mon code de Janvier 2023, "Diapo Clic".

    Or, ce code comporte un attribut en javascript (onclick) qui semble être indigeste pour son système.

    Voilà donc une version uniquement de code CSS, avec ses  8 + 1 images.

    Par un clic hors du montage, on affiche l'image de départ; un clic sur chaque vignette affiche l'image en grand.

    Les vignettes peuvent être de forme différente de même que la présentation générale; à vous de le modifier à vos goûts.

     


    <div style="width: 1000px; height: 650px; margin: 30px auto; text-align: left;">
    <input id="truc1" class="truc" src="http://ekladata.com/UEleS2dEedD2f-lHPVvwR2rSz3g/382720313-834980398510824-3548553583024586870-n-2.jpg" type="image" />
    <input id="truc2" class="truc" src="http://ekladata.com/YberRbQ0uQb6Z6IWIquGhKyfxSs/IMG-20231014-195844-2.jpg" type="image" />
    <input id="truc3" class="truc" src="http://ekladata.com/31KQmrzq7quwpsTGtjWPD2E9IIs/382980117-833819351960262-6159493190128333083-n-2.jpg" type="image" />
    <input id="truc4" class="truc" src="http://ekladata.com/xRfnk0WGu0nd9Zkbudo2xlin4t4/387763802-838235951518602-5295927141420627768-n-2.jpg" type="image" />
    <input id="truc5" class="truc" src="http://ekladata.com/Jd6VS2kEhvJQxVHN84L98ugNwb0/IMG-20231014-200712-2.jpg" type="image" />
    <input id="truc6" class="truc" src="http://ekladata.com/Mjo51YQfIZn-wQDOH1M_B4C7ZA0/IMG-20231014-174627-2.jpg" type="image" />
    <input id="truc7" class="truc" src="http://ekladata.com/svh75sbUlAH1ke6jCOIRi1xf5S0/383994700-835120768496787-5854659009042088900-n.jpg" type="image" />
    <input id="truc8" class="truc" src="http://ekladata.com/LYWpfFTn9WUodA89nlArNZJPjLI/382970649-834976038511260-9051073005145560343-n-2.jpg" type="image" />
    <p id="machin">&nbsp;</p>
    </div>

    <style><!--
    #machin{position:absolute; z-index:1; width:1000px; height:563px; border:4px ridge brown; transform:translate(0px,0px); background:url('http://ekladata.com/6hqZADQRNVIcS-twn3g8_4NdP-8/384190418-834984105177120-7595289776499478162-n-2.jpg'); background-size:cover;}
    .truc{position:absolute; z-index:1; width:100px; height:60px; border: 4px solid white; box-shadow:4px 4px 6px black;}
    #truc1{transform:translate(10px,580px);}
    #truc2{transform:translate(135px,580px);}
    #truc3{transform:translate(260px,580px);}
    #truc4{transform:translate(385px,580px);}
    #truc5{transform:translate(510px,580px);}
    #truc6{transform:translate(635px,580px);}
    #truc7{transform:translate(760px,580px);}
    #truc8{transform:translate(885px,580px);}
    #truc1:focus ~ #machin{background:url('http://ekladata.com/UEleS2dEedD2f-lHPVvwR2rSz3g/382720313-834980398510824-3548553583024586870-n-2.jpg');}
    #truc2:focus ~ #machin{background:url('http://ekladata.com/YberRbQ0uQb6Z6IWIquGhKyfxSs/IMG-20231014-195844-2.jpg');}
    #truc3:focus ~ #machin{background:url('http://ekladata.com/31KQmrzq7quwpsTGtjWPD2E9IIs/382980117-833819351960262-6159493190128333083-n-2.jpg');}
    #truc4:focus ~ #machin{background:url('http://ekladata.com/xRfnk0WGu0nd9Zkbudo2xlin4t4/387763802-838235951518602-5295927141420627768-n-2.jpg');}
    #truc5:focus ~ #machin{background:url('http://ekladata.com/Jd6VS2kEhvJQxVHN84L98ugNwb0/IMG-20231014-200712-2.jpg');}
    #truc6:focus ~ #machin{background:url('http://ekladata.com/Mjo51YQfIZn-wQDOH1M_B4C7ZA0/IMG-20231014-174627-2.jpg');}
    #truc7:focus ~ #machin{background:url('http://ekladata.com/svh75sbUlAH1ke6jCOIRi1xf5S0/383994700-835120768496787-5854659009042088900-n.jpg');}
    #truc8:focus ~ #machin{background:url('http://ekladata.com/LYWpfFTn9WUodA89nlArNZJPjLI/382970649-834976038511260-9051073005145560343-n-2.jpg');}
    --></style>