Diapo V3

Reprise en 800x600px d'un montage publié en 1000x563px.
Le survol des vignettes les illumine et le clic change l'image principale.
Première image en noir et blanc au départ, pour avoir un fond.

code article:
<div style="width: 800px; height: 600px; border: 6px ridge white; text-align: center; overflow: hidden; margin: 5px auto;">
<div id="ancres" style="width: 100px; float: left; margin: 0 0 600px 0;"><a id="lien1" class="ancre"></a> <a id="lien2" class="ancre"></a> <a id="lien3" class="ancre"></a> <a id="lien4" class="ancre"></a>
<div id="tr1"><a href="#lien1"><img src="http://ekladata.com/a_263C4gFg8exF3FzfC5GqZp3qo/ar1v.jpg"></a></div>
<div id="tr2"><a href="#lien2"><img src="http://ekladata.com/kvJeHKvwFc06ixcfzt2ZDbsxOUQ/ar2v.jpg"></a></div>
<div id="tr3"><a href="#lien3"><img src="http://ekladata.com/KAuAxA3OGPZ34SObE5v2o70hgvI/ar3v.jpg"></a></div>
<div id="tr4"><a href="#lien4"><img src="http://ekladata.com/ay7XM-j3RSynQRFYhXEFfh7fRXY/ar4v.jpg"></a></div>
<div id="d1"><img src="http://ekladata.com/C08w_TyXX8btSYLvkzvreFP73Fk/ar1.jpg" alt="" /></div>
<div id="d2"><img src="http://ekladata.com/fpw_FLUnkzVhPmDDJVJL60pu_XI/ar2.jpg" alt="" /></div>
<div id="d3"><img src="http://ekladata.com/qbNiy421uANPvkrkNdcw-yJExBw/ar3.jpg" alt="" /></div>
<div id="d4"><img src="http://ekladata.com/vx9TRASP6lMi3KlzWp309qp4tHw/ar4.jpg" alt="" /></div>
</div>
</div>
</div>
<style type="text/css"><!--
#ancres a.ancre{display: none;}
#d1{ width:800px; height:600px; transition:all 1s linear; position:absolute; transform:translate(0px,0px); opacity:0.5; filter:grayscale(1); -webkit-filter:grayscale(1);}
#d2{ width:800px; height:600px; transition:all 1s linear; position:absolute; transform:translate(0px,0px); opacity:0;}
#d3{ width:800px; height:600px; transition:all 1s linear; position:absolute; transform:translate(0px,0px); opacity:0;}
#d4{ width:800px; height:600px; transition:all 1s linear; position:absolute; transform:translate(0px,0px); opacity:0;}
#tr1{ position:absolute; z-index:5; transform:translate(650px,30px); opacity:0.5; border:2px solid white; box-shadow:2px 2px black;}
#tr2{ position:absolute; z-index:5; transform:translate(650px,130px); opacity:0.5; border:2px solid white; box-shadow:2px 2px black;}
#tr3{ position:absolute; z-index:5; transform:translate(650px,230px); opacity:0.5; border:2px solid white; box-shadow:2px 2px black;}
#tr4{ position:absolute; z-index:5; transform:translate(650px,330px); opacity:0.5; border:2px solid white; box-shadow:2px 2px black;}
#tr1:hover{opacity:1;}
#tr2:hover{opacity:1;}
#tr3:hover{opacity:1;}
#tr4:hover{opacity:1;}
#ancres a#lien1:target ~ #d1{opacity:1; z-index:2; filter:grayscale(0); -webkit-filter:grayscale(0);}
#ancres a#lien2:target ~ #d2{opacity:1; z-index:2;}
#ancres a#lien3:target ~ #d3{opacity:1; z-index:2;}
#ancres a#lien4:target ~ #d4{opacity:1; z-index:2;}
--></style>
...