Diapo Clip

Clic sur les boutons vert/bleu et retour sur le rouge/jaune.

Ce code est pour les navigateurs webkit (Chrome, Opéra, Safari) mais je ne sais pas faire pour Firefox.

<div id="ancres" style="width: 800px; height: 600px; 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> <a id="lien6" class="ancre"></a>
<p id="tr0"><a href="#lien"><img src="http://ekladata.com/Chii0wI_EollV37evuA4sBLk8n8/btd.png" alt="" /></a></p>
<p id="tr1"><a href="#lien1"><img src="http://ekladata.com/o9iuQjVcF7p1m5L9iwjhcqeO5oE/btbl.png" alt="" /></a></p>
<p id="tr2"><a href="#lien2"><img src="http://ekladata.com/o9iuQjVcF7p1m5L9iwjhcqeO5oE/btbl.png" alt="" /></a></p>
<p id="tr3"><a href="#lien3"><img src="http://ekladata.com/o9iuQjVcF7p1m5L9iwjhcqeO5oE/btbl.png" alt="" /></a></p>
<p id="tr4"><a href="#lien4"><img src="http://ekladata.com/o9iuQjVcF7p1m5L9iwjhcqeO5oE/btbl.png" alt="" /></a></p>
<p id="tr5"><a href="#lien5"><img src="http://ekladata.com/o9iuQjVcF7p1m5L9iwjhcqeO5oE/btbl.png" alt="" /></a></p>
<p id="tr6"><a href="#lien6"><img src="http://ekladata.com/o9iuQjVcF7p1m5L9iwjhcqeO5oE/btbl.png" alt="" /></a></p>
<p id="img0" style="background-image: url('http://ekladata.com/OS_O-8EV0Fxi_Gt1-5NoczRWKf4/10022612245996920.gif');">&nbsp;</p>
<p id="img1"><img src="http://ekladata.com/GoEa6IgipmIy5HzAfIfte5juthY/DSCN6333.jpg" alt="" /></p>
<p id="img2"><img src="http://ekladata.com/ahIDHsvto9RsANqo1QrfMjvbk8o/DSCN6339.jpg" alt="" /></p>
<p id="img3"><img src="http://ekladata.com/PJrCvBl1M91Kk8uI5bKbujhrKi8/DSCN6340.jpg" alt="" /></p>
<p id="img4"><img src="http://ekladata.com/eRhh9LcZTnYUKHF5qZQdZJpsna8/DSCN6341.jpg" alt="" /></p>
<p id="img5"><img src="http://ekladata.com/f2s3Qw03Gvi21-P0ofegiefnJ1I/DSCN6344.jpg" alt="" /></p>
<p id="img6"><img src="http://ekladata.com/sZ1qbuf1uxTILt38ovP8_N0QjWE/DSCN6345.jpg" alt="" /></p>
</div>
<style type="text/css"><!--
#ancres a.ancre{display: none;}
#tr0{transform:translate(20px,20px);position:absolute;z-index:15;}
#tr1{position:absolute;z-index:10;transform:translate(20px,70px);}
#tr2{position:absolute;z-index:10;transform:translate(20px,120px);}
#tr3{position:absolute;z-index:10;transform:translate(20px,170px);}
#tr4{position:absolute;z-index:10;transform:translate(20px,220px);}
#tr5{position:absolute;z-index:10;transform:translate(20px,270px);}
#tr6{position:absolute;z-index:10;transform:translate(20px,320px);}

#img0{width:800px;height:600px;position:absolute;}
#img1{position:absolute;z-index:2;width:800px;height:600px;background-size:cover; -webkit-clip-path:circle(100px at 150px 150px);transition: all 2s ease;}
#img2{position:absolute;z-index:2;width:800px;height:600px;background-size:cover; -webkit-clip-path:circle(150px at 250px 400px); transition: all 2s ease;}
#img3{position:absolute;z-index:2;width:800px;height:600px;background-size:cover; -webkit-clip-path:circle(100px at 300px 200px);transition: all 2s ease;}
#img4{position:absolute;z-index:2;width:800px;height:600px;background-size:cover; -webkit-clip-path:circle(150px at 480px 330px); transition: all 2s ease;}
#img5{position:absolute;z-index:2;width:800px;height:600px;background-size:cover; -webkit-clip-path:circle(100px at 650px 480px);transition: all 2s ease;}
#img6{position:absolute;z-index:2;width:800px;height:600px;background-size:cover; -webkit-clip-path:circle(150px at 600px 200px); transition: all 2s ease;}

#ancres a#lien1:target ~ #img1{ z-index:12;-webkit-clip-path: circle(800px at 400px 300px); }
#ancres a#lien2:target ~ #img2{ z-index:12;-webkit-clip-path: circle(800px at 400px 300px); }
#ancres a#lien3:target ~ #img3{ z-index:12;-webkit-clip-path: circle(800px at 400px 300px); }
#ancres a#lien4:target ~ #img4{ z-index:12;-webkit-clip-path: circle(800px at 400px 300px); }
#ancres a#lien5:target ~ #img5{ z-index:12;-webkit-clip-path: circle(800px at 400px 300px); }
#ancres a#lien6:target ~ #img6{ z-index:12;-webkit-clip-path: circle(800px at 400px 300px); }
--></style>

6 images en 800x600px dont les adresses sont en rouge/gras.