Diaporama E

Code

<div id="mont">
<div id="ancres"><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="cc">Au<br />CLIC</p>
<p id="av0"><a href="#lien"><span style="color: yellow;">0</span></a></p>
<p id="av1"><a href="#lien1"><span style="color: yellow;">1</span></a></p>
<p id="av2"><a href="#lien2"><span style="color: yellow;">2</span></a></p>
<p id="av3"><a href="#lien3"><span style="color: yellow;">3</span></a></p>
<p id="av4"><a href="#lien4"><span style="color: yellow;">4</span></a></p>
<p id="av5"><a href="#lien5"><span style="color: yellow;">5</span></a></p>
<p id="dia0">&nbsp;</p>
<p id="dia1">&nbsp;</p>
<p id="dia2">&nbsp;</p>
<p id="dia3">&nbsp;</p>
<p id="dia4">&nbsp;</p>
<p id="dia5">&nbsp;</p>
</div>
</div>

<style><!--
#mont{position:relative; width:800px; height:600px; border:4px double white; border:4px double white; margin:10px auto; overflow:hidden; }
#ancres a.ancre{display: none;}
#cc{position:absolute; z-index:2; width:60px; height:60px; text-align:center;font-size:18pt; transform:translate(730px,20px); color:yellow;}
#av0{position:absolute; z-index:2; width:60px; height:60px; font-size:30pt; text-shadow:1px 1px black; transform:translate(750px,100px);}
#av1{position:absolute; z-index:2; width:60px; height:60px; font-size:30pt; text-shadow:1px 1px black; transform:translate(750px,180px);}
#av2{position:absolute; z-index:2; width:60px; height:60px; font-size:30pt; text-shadow:1px 1px black; transform:translate(750px,260px);}
#av3{position:absolute; z-index:2; width:60px; height:60px; font-size:30pt; text-shadow:1px 1px black; transform:translate(750px,340px);}
#av4{position:absolute; z-index:2; width:60px; height:60px; font-size:30pt; text-shadow:1px 1px black; transform:translate(750px,400px);}
#av5{position:absolute; z-index:2; width:60px; height:60px; font-size:30pt; text-shadow:1px 1px black; transform:translate(750px,480px);}

#dia0{position:absolute; z-index:1; transition:all 2s linear; width:800px; height:600px; transform:translate(0px,0px); background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/septembre/03/DSCN3054.JPG');}
#dia1{position:absolute; z-index:1; transition:all 2s linear; width:800px; height:600px; transform:translate(-800px,0px); background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/septembre/03/DSCN3055.JPG');}
#dia2{position:absolute; z-index:1; transition:all 2s linear; width:800px; height:600px; transform:translate(-800px,0px); background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/septembre/03/DSCN3059.JPG');}
#dia3{position:absolute; z-index:1; transition:all 2s linear; width:800px; height:600px; transform:translate(-800px,0px); background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/septembre/03/DSCN3069.JPG');}
#dia4{position:absolute; z-index:1; transition:all 2s linear; width:800px; height:600px; transform:translate(-800px,0px); background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/septembre/03/DSCN3071.JPG');}
#dia5{position:absolute; z-index:1; transition:all 2s linear; width:800px; height:600px; transform:translate(-800px,0px); background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/septembre/03/DSCN3073.JPG');}
#ancres a#lien1:target ~ #dia1{transform:translate(0px,0px);}
#ancres a#lien2:target ~ #dia2{transform:translate(0px,0px);}
#ancres a#lien3:target ~ #dia3{transform:translate(0px,0px);}
#ancres a#lien4:target ~ #dia4{transform:translate(0px,0px);}
#ancres a#lien5:target ~ #dia5{transform:translate(0px,0px);}
--></style>
Vous pouvez ajouter des couples bouton (av6)/image(dia6), sans oublier de créer une ancre <a id="lien6" class="ancre"></a> et la commande au clic qui convient: #ancres a#lien6:target ~ #dia6{transform:translate(0px,0px);}

Vous remarquerez que pour le retour en base, au clic sur le "0", celui-ci n'ayant pas un lien actif, le montage revient en base.