• Diaporama 28

     

    0

    1

    2

    3

    4

    5

    6

    7

    Clic sur les chiffres.

     

     

     

     

     

     

     

    ...

    <div id="mont" style="width: 800px; height: 600px; border: 4px ridge white; box-shadow: 4px 4px 8px black; background: url('http://ekladata.com/xwvjtLzimjnTXCD3slrCFvUWSFM/doghair.jpg'); 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> <a id="lien7" class="ancre"></a>
    <p id="bt0"><a href="#lien0"><span style="font-size: 25pt; color: white; text-shadow: 1px 1px black;">0</span></a></p>
    <p id="bt1"><a href="#lien1"><span style="font-size: 25pt; color: white; text-shadow: 1px 1px black;">1</span></a></p>
    <p id="bt2"><a href="#lien2"><span style="font-size: 25pt; color: white; text-shadow: 1px 1px black;">2</span></a></p>
    <p id="bt3"><a href="#lien3"><span style="font-size: 25pt; color: white; text-shadow: 1px 1px black;">3</span></a></p>
    <p id="bt4"><a href="#lien4"><span style="font-size: 25pt; color: white; text-shadow: 1px 1px black;">4</span></a></p>
    <p id="bt5"><a href="#lien5"><span style="font-size: 25pt; color: white; text-shadow: 1px 1px black;">5</span></a></p>
    <p id="bt6"><a href="#lien6"><span style="font-size: 25pt; color: white; text-shadow: 1px 1px black;">6</span></a></p>
    <p id="bt7"><a href="#lien7"><span style="font-size: 25pt; color: white; text-shadow: 1px 1px black;">7</span></a></p>
    <p id="ex">Clic sur les chiffres.</p>
    <p id="pg1">&nbsp;</p>
    <p id="pg2">&nbsp;</p>
    <p id="pg3">&nbsp;</p>
    <p id="pg4">&nbsp;</p>
    <p id="pg5">&nbsp;</p>
    <p id="pg6">&nbsp;</p>
    <p id="pg7">&nbsp;</p>
    </div>

    <style type="text/css"><!--
    #mont a.ancre{display: none;}

    #bt0{position:absolute; z-index:10; transform:translate(770px,10px); font-size:20pt;}
    #bt1{position:absolute; z-index:10; transform:translate(770px,80px); font-size:20pt;}
    #bt2{position:absolute; z-index:10; transform:translate(770px,150px); font-size:20pt;}
    #bt3{position:absolute; z-index:10; transform:translate(770px,220px); font-size:20pt;}
    #bt4{position:absolute; z-index:10; transform:translate(770px,290px); font-size:20pt;}
    #bt5{position:absolute; z-index:10; transform:translate(770px,360px); font-size:20pt;}
    #bt6{position:absolute; z-index:10; transform:translate(770px,430px); font-size:20pt;}
    #bt7{position:absolute; z-index:10; transform:translate(770px,500px); font-size:20pt;}
    #ex{position:absolute; z-index:1; width:300px; height:100px; text-align:center; font-size:35pt; color:white; text-shadow:1px 1px black; transform:translate(250px,150px);}
    #pg1{position:absolute; z-index:1; transition:all 1s linear; transform:translate(100px,250px); width:100px; height:100px; border:1px solid black; opacity:0; background:url('http://ekladata.com/Q1_1PD1AfODZFkNZz9PnDtsGptw/DSCN6271.jpg');}
    #pg2{position:absolute; z-index:1; transition:all 1s linear; transform:translate(100px,250px); width:100px; height:100px; border:1px solid black; opacity:0; background:url('http://ekladata.com/_1_Svu4MKG4P1H4ehwz7MZnR7P8/DSCN6273.jpg');}
    #pg3{position:absolute; z-index:1; transition:all 1s linear; transform:translate(100px,250px); width:100px; height:100px; border:1px solid black; opacity:0; background:url('http://ekladata.com/iA9jyejr8WQt-lb9PgLaWE-30a8/DSCN6274.jpg');}
    #pg4{position:absolute; z-index:1; transition:all 1s linear; transform:translate(100px,250px); width:100px; height:100px; border:1px solid black; opacity:0; background:url('http://ekladata.com/cQgqWgu8nz_KRcSPivSFQi7oUPk/DSCN6275.jpg');}
    #pg5{position:absolute; z-index:1; transition:all 1s linear; transform:translate(100px,250px); width:100px; height:100px; border:1px solid black; opacity:0; background:url('http://ekladata.com/PSEcc2WsqIGSD6fIkj9asZr4lb0/DSCN6276.jpg');}
    #pg6{position:absolute; z-index:1; transition:all 1s linear; transform:translate(100px,250px); width:100px; height:100px; border:1px solid black; opacity:0; background:url('http://ekladata.com/aX3nqrFix4es4yYbW4HRYOyxrx0/DSCN6277.jpg');}
    #pg7{position:absolute; z-index:1; transition:all 1s linear; transform:translate(100px,250px); width:100px; height:100px; border:1px solid black; opacity:0; background:url('http://ekladata.com/26fSBHxESsKg7cDeXUG1gNF7sGE/DSCN6278.jpg');}
    #mont a#lien1:target ~ #pg1{transform:translate(0px,0px); width:800px; height:600px; opacity:1;}
    #mont a#lien2:target ~ #pg2{transform:translate(0px,0px); width:800px; height:600px; opacity:1;}
    #mont a#lien3:target ~ #pg3{transform:translate(0px,0px); width:800px; height:600px; opacity:1;}
    #mont a#lien4:target ~ #pg4{transform:translate(0px,0px); width:800px; height:600px; opacity:1;}
    #mont a#lien5:target ~ #pg5{transform:translate(0px,0px); width:800px; height:600px; opacity:1;}
    #mont a#lien6:target ~ #pg6{transform:translate(0px,0px); width:800px; height:600px; opacity:1;}
    #mont a#lien7:target ~ #pg7{transform:translate(0px,0px); width:800px; height:600px; opacity:1;}
    --></style>


    7 adresses d'images en 800x600px, en gras, surligné en bleu, que vous pouvez remplacer par les vôtres.
    ...