Diaporama 30

Article créé le 1er novembre 2015, alors que l'hébergement images chez Ekla était en panne; c'est de l'histoire ancienne ! Bonne nuit à leurs techniciens !
Clic sur les boutons ont été créés avec le logiciel the Gimp.

...

<div id="mont" style="width: 800px; height: 600px; border: 1px solid black; position: relative; margin: 10px auto;"><a id="lien1" class="ancre"></a> <a id="lien2" class="ancre"></a> <a id="lien3" class="ancre"></a> <a id="lien4" class="ancre"></a> <a id="lien5" class="ancre"></a>

<p id="z1"><a href="#lien1"><img src="http://ekladata.com/mT_POOzIh9xFhd_UFBCT5hLjo6I/bt2.png" alt="" /></a></p>

<p id="z2"><a href="#lien2"><img src="http://ekladata.com/mT_POOzIh9xFhd_UFBCT5hLjo6I/bt2.png" alt="" /></a></p>

<p id="z3"><a href="#lien3"><img src="http://ekladata.com/mT_POOzIh9xFhd_UFBCT5hLjo6I/bt2.png" alt="" /></a></p>

<p id="z4"><a href="#lien4"><img src="http://ekladata.com/mT_POOzIh9xFhd_UFBCT5hLjo6I/bt2.png" alt="" /></a></p>

<p id="z5"><a href="#lien5"><img src="http://ekladata.com/mT_POOzIh9xFhd_UFBCT5hLjo6I/bt2.png" alt="" /></a></p>

<p id="z6"><a href="#lien"><img src="http://ekladata.com/JUWuRz893LbNOcVNws-_CCUE25Q/btspir.png" alt="" /></a></p>

<p id="mac1">&nbsp;</p>

<p id="mac2">&nbsp;</p>

<p id="mac3">&nbsp;</p>

<p id="mac4">&nbsp;</p>

<p id="mac5">&nbsp;</p>

</div>

<style type="text/css"><!--

#mont a.ancre{display: none;}

#z1{position:absolute; z-index:10; transform:translate(750px,20px);}

#z2{position:absolute; z-index:10; transform:translate(750px,70px);}

#z3{position:absolute; z-index:10; transform:translate(750px,120px);}

#z4{position:absolute; z-index:10; transform:translate(750px,170px);}

#z5{position:absolute; z-index:10; transform:translate(750px,220px);}

#z6{position:absolute; z-index:10; transform:translate(750px,270px);}

#mac1{position:absolute; z-index:1; transition:all 1.5s linear; width:396px; height:296px; transform:translate(0px,0px); border:2px solid white; background:url('http://ekladata.com/3KernSVcnfuLJpVwnNZrD072MKk/DSCN6285.jpg'); background-position:0% 0%;}

#mac2{position:absolute; z-index:1; transition:all 1.5s linear; width:396px; height:296px; transform:translate(400px,0px); border:2px solid white; background:url('http://ekladata.com/Dp0ZHovSKNfU5pnoU-MTAyCBxyc/DSCN6287.jpg'); background-position:100% 0%;}

#mac3{position:absolute; z-index:1; transition:all 1.5s linear; width:396px; height:296px; transform:translate(400px,300px); border:2px solid white; background:url('http://ekladata.com/KNGGJZcYdueGZ3nDIRcIF7_YKxA/DSCN6290.jpg'); background-position:100% 100%;}

#mac4{position:absolute; z-index:1; transition:all 1.5s linear; width:396px; height:296px; transform:translate(0px,300px); border:2px solid white; background:url('http://ekladata.com/6Ni3mVanhhENfJuz9fS4MKLapVY/DSCN6284.jpg'); background-position:0% 100%;}

#mac5{position:absolute; z-index:2; transition:all 1.5s linear; width:396px; height:296px; transform:translate(200px,150px); border:2px solid white; background:url('http://ekladata.com/w82wJGnbSyOx-2NeO74fhqkqxu0/DSCN6286.jpg'); background-position:50% 50%;}

#mont a#lien1:target ~ #mac1{z-index:5; transform:translate(0px,0px);width:800px;height:600px;}

#mont a#lien2:target ~ #mac2{z-index:5; transform:translate(0px,0px);width:800px;height:600px;}

#mont a#lien3:target ~ #mac3{z-index:5; transform:translate(0px,0px);width:800px;height:600px;}

#mont a#lien4:target ~ #mac4{z-index:5; transform:translate(0px,0px);width:800px;height:600px;}

#mont a#lien5:target ~ #mac5{z-index:5; transform:translate(0px,0px);width:800px;height:600px;}

--></style>

Les adresses de mes images sont en rouge/gras et vous pouvez essayer ce code en les remplaçant par les vôtres, en 800x600px, sans rien changer d'autre.