• Diaporama dé avec couleur cliquée

    Une variante avec changement de couleur du point de dé cliqué.

     

    1

    2

    3

    4

    5

    6

    7

    8

    9

    code.

    <div style="width: 800px; height: 600px; border: 4px ridge white; position: relative; overflow: hidden; margin: 10px auto;">
    <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> <a id="lien6" class="ancre"></a> <a id="lien7" class="ancre"></a> <a id="lien8" class="ancre"></a> <a id="lien9" class="ancre"></a>
    <p id="d">&nbsp;</p>
    <p id="bt1"><a href="#lien1">1</a></p>
    <p id="bt2"><a href="#lien2">2</a></p>
    <p id="bt3"><a href="#lien3">3</a></p>
    <p id="bt4"><a href="#lien4">4</a></p>
    <p id="bt5"><a href="#lien5">5</a></p>
    <p id="bt6"><a href="#lien6">6</a></p>
    <p id="bt7"><a href="#lien7">7</a></p>
    <p id="bt8"><a href="#lien8">8</a></p>
    <p id="bt9"><a href="#lien9">9</a></p>
    <p id="im1"><img style="width: 800px; height: 600px; float: left;" src="http://ekladata.com/8AfuENcAw-kV5tihmMOvOol0wbk/5656.jpg" alt="" /> <img style="width: 800px; height: 600px; float: left;" src="http://ekladata.com/AOu5XBoqDEBPJrJ0QDYs-lfErj8/5658.jpg" alt="" /> <img style="width: 800px; height: 600px; float: left;" src="http://ekladata.com/gKnk3Cn1A29o2OQyMxOYwvkSTyE/5659.jpg" alt="" /> <img style="width: 800px; height: 600px; float: left; clear: left;" src="http://ekladata.com/Z6exEJYW-T8NxVGxqHPfZiISiYA/5660.jpg" alt="" /> <img style="width: 800px; height: 600px; float: left;" src="http://ekladata.com/nswa3lHCs3YSJ-D2jW-gYVwfp24/5661.jpg" alt="" /> <img style="width: 800px; height: 600px; float: left;" src="http://ekladata.com/DboqJ0ePIm4S5EOZhy8wZ9s3z28/5662.jpg" alt="" /> <img style="width: 800px; height: 600px; float: left; clear: left;" src="http://ekladata.com/O1swEBQog_oKEy6xUHqJ9G667y8/5663.jpg" alt="" /> <img style="width: 800px; height: 600px; float: left;" src="http://ekladata.com/q1CSvXHpgLfGT3Y6i8iuVSsJ9Gk/5664.jpg" alt="" /> <img style="width: 800px; height: 600px; float: left;" src="http://ekladata.com/QQzQajSGFbyqP1TtU75s6qZzoJk/5665.jpg" alt="" /></p>
    </div>
    </div>

    <style><!--
    #ancres a.ancre{display: none;}
    #d{position:absolute; z-index:2; transform:translate(700px,0px); width: 100px; height: 105px; border: 1px solid black; border-radius:10px; background-color: rgba(255,255,255,0.5);}
    #bt1{position:absolute;z-index:3; transform:translate(710px,5px); background-color: lime; width: 20px; height: 20px; border: 1px solid black; border-radius:50%; text-align:center; box-shadow:1px 1px black;}
    #bt2{position:absolute;z-index:3; transform:translate(740px,5px); background-color: lime; width: 20px; height: 20px; border: 1px solid black; border-radius:50%; text-align:center; box-shadow:1px 1px black;}
    #bt3{position:absolute;z-index:3; transform:translate(770px,5px); background-color: lime; width: 20px; height: 20px; border: 1px solid black; border-radius:50%; text-align:center; box-shadow:1px 1px black;}
    #bt4{position:absolute;z-index:3; transform:translate(710px,40px); background-color: lime; width: 20px; height: 20px; border: 1px solid black; border-radius:50%; text-align:center; box-shadow:1px 1px black;}
    #bt5{position:absolute;z-index:3; transform:translate(740px,40px); background-color: lime; width: 20px; height: 20px; border: 1px solid black; border-radius:50%; text-align:center; box-shadow:1px 1px black;}
    #bt6{position:absolute;z-index:3; transform:translate(770px,40px); background-color: lime; width: 20px; height: 20px; border: 1px solid black; border-radius:50%; text-align:center; box-shadow:1px 1px black;}
    #bt7{position:absolute;z-index:3; transform:translate(710px,75px); background-color: lime; width: 20px; height: 20px; border: 1px solid black; border-radius:50%; text-align:center; box-shadow:1px 1px black;}
    #bt8{position:absolute;z-index:3; transform:translate(740px,75px); background-color: lime; width: 20px; height: 20px; border: 1px solid black; border-radius:50%; text-align:center; box-shadow:1px 1px black;}
    #bt9{position:absolute;z-index:3; transform:translate(770px,75px); background-color: lime; width: 20px; height: 20px; border: 1px solid black; border-radius:50%; text-align:center; box-shadow:1px 1px black;}
    #im1{position:absolute;z-index:1; transform:translate(0px,0px); transition:all 1s linear; width:2400px; height:1800px;}

    #ancres a#lien1:target ~ #im1{transform:translate(0px,0px);}
    #ancres a#lien1:target ~ #bt1{background-color:red;}
    #ancres a#lien2:target ~ #im1{transform:translate(-800px,0px);}
    #ancres a#lien2:target ~ #bt2{background-color:red;}
    #ancres a#lien3:target ~ #im1{transform:translate(-1600px,0px);}
    #ancres a#lien3:target ~ #bt3{background-color:red;}
    #ancres a#lien4:target ~ #im1{transform:translate(0px,-600px);}
    #ancres a#lien4:target ~ #bt4{background-color:red;}
    #ancres a#lien5:target ~ #im1{transform:translate(-800px,-600px);}
    #ancres a#lien5:target ~ #bt5{background-color:red;}
    #ancres a#lien6:target ~ #im1{transform:translate(-1600px,-600px);}
    #ancres a#lien6:target ~ #bt6{background-color:red;}
    #ancres a#lien7:target ~ #im1{transform:translate(0px,-1200px);}
    #ancres a#lien7:target ~ #bt7{background-color:red;}
    #ancres a#lien8:target ~ #im1{transform:translate(-800px,-1200px);}
    #ancres a#lien8:target ~ #bt8{background-color:red;}
    #ancres a#lien9:target ~ #im1{transform:translate(-1600px,-1200px);}
    #ancres a#lien9:target ~ #bt6{background-color:red;}
    --></style>


    ...
    Les ancres surlignées en mauve commandent le mouvement de images et celles surlignées en vert foncé, le changement de couleur du point cliqué.