• Diapo F

    clic

     

     

     

     

     

     

    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="av0"><a href="#lien"><span style="color: yellow;">clic</span></a></p>
    <p id="av1"><a href="#lien1"><img style="width: 80px; height: 60px;" src="http://ekladata.com/omkHvdI_dFfTblNPmCdbri94EL8/1px-par-1px.png" alt="" /></a></p>
    <p id="av2"><a href="#lien2"><img style="width: 80px; height: 60px;" src="http://ekladata.com/omkHvdI_dFfTblNPmCdbri94EL8/1px-par-1px.png" alt="" /></a></p>
    <p id="av3"><a href="#lien3"><img style="width: 80px; height: 60px;" src="http://ekladata.com/omkHvdI_dFfTblNPmCdbri94EL8/1px-par-1px.png" alt="" /></a></p>
    <p id="av4"><a href="#lien4"><img style="width: 80px; height: 60px;" src="http://ekladata.com/omkHvdI_dFfTblNPmCdbri94EL8/1px-par-1px.png" alt="" /></a></p>
    <p id="av5"><a href="#lien5"><img style="width: 80px; height: 60px;" src="http://ekladata.com/omkHvdI_dFfTblNPmCdbri94EL8/1px-par-1px.png" alt="" /></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;}

    #av0{position:absolute; z-index:5; width:60px; height:40px; font-size:20pt; text-shadow:1px 1px black; transform:translate(740px,0px); border:1px solid yellow; text-align:center; background-color:rgba(128,128,128,0.5);}
    #av1{position:absolute; z-index:2; transform:translate(100px,0px);}
    #av2{position:absolute; z-index:2; transform:translate(200px,0px);}
    #av3{position:absolute; z-index:2; transform:translate(300px,0px);}
    #av4{position:absolute; z-index:2; transform:translate(400px,0px);}
    #av5{position:absolute; z-index:2; transform:translate(500px,0px);}
    #dia0{position:absolute; z-index:1; width:800px; height:600px; transform:translate(0px,0px); background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/septembre/04/DSCN2734.JPG');}
    #dia1{position:absolute; z-index:1; transition:height 2s linear 0s, width 2s linear 2s, transform 2s linear 2s; width:80px; height:60px; transform:translate(100px,0px); border:2px solid lime; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/septembre/04/DSCN2786.JPG'); background-position:15% 0%;}
    #dia2{position:absolute; z-index:1; transition:height 2s linear 0s, width 2s linear 2s, transform 2s linear 2s; width:80px; height:60px; transform:translate(200px,0px); border:2px solid lime; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/septembre/04/DSCN2787.JPG'); background-position:30% 0%;}
    #dia3{position:absolute; z-index:1; transition:height 2s linear 0s, width 2s linear 2s, transform 2s linear 2s; width:80px; height:60px; transform:translate(300px,0px); border:2px solid lime; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/septembre/04/DSCN2851f.JPG'); background-position:45% 0%;}
    #dia4{position:absolute; z-index:1; transition:height 2s linear 0s, width 2s linear 2s, transform 2s linear 2s; width:80px; height:60px; transform:translate(400px,0px); border:2px solid lime; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/septembre/04/DSCN2871.JPG'); background-position:60% 0%;}
    #dia5{position:absolute; z-index:1; transition:height 2s linear 0s, width 2s linear 2s, transform 2s linear 2s; width:80px; height:60px; transform:translate(500px,0px); border:2px solid lime; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/septembre/04/DSCN2894.JPG'); background-position:75% 0%;}
    #ancres a#lien1:target ~ #dia1{transform:translate(0px,0px); width:800px; height:600px; border:0px;  z-index:3;}}
    #ancres a#lien2:target ~ #dia2{transform:translate(0px,0px); width:800px; height:600px; border:0px;  z-index:3;}}
    #ancres a#lien3:target ~ #dia3{transform:translate(0px,0px); width:800px; height:600px; border:0px;  z-index:3;}}
    #ancres a#lien4:target ~ #dia4{transform:translate(0px,0px); width:800px; height:600px; border:0px;  z-index:3;}}
    #ancres a#lien5:target ~ #dia5{transform:translate(0px,0px); width:800px; height:600px; border:0px;  z-index:3;}}
    --></style>
    ...
    ...